How to create 3-column layout (fixed, fixed, fluid)

Question

I am trying to create a 3-column layout that works on most mobile browsers. Flex does not work unfortunately.

There is a great help for liquid, fixed, fixed layout (http://www.pagecolumn.com/liquidfixed/3_col_liquid-fix-fix.htm), but I do need fixed, fixed, liquid.

Could not get this done so far and hope for any help on this.

Answer 1

When you want to have the last element fluid then you can use float:none;.

The last element gets the float:none; and also a padding-left equal to the width of the other two fixed divs.

HTML

<div class="fixed first">
    fixed first
</div>
<div class="fixed second">
    fixed second
</div>
<div class="fluid third">
    fluid third
</div>

CSS

.fixed {float:left; }

.first {width:100px; height:100px; background-color:#ccc;}
.second {width:100px; height:100px; background-color:#ddd;}

.fluid { float:none;  padding-left:200px; background-color:#eee; height:100px;}

Here is a demo

Update based on comments (changes only in CSS)

.fixed {float:left; }

.first {width:100px; height:100px; background-color:#ccc; margin-right:10px;}
.second {width:100px; height:100px; background-color:#ddd; margin-right:10px;}

.fluid { float:none;  margin-left:220px; background-color:#eee; height:100px;}

This concept can also wotk with margin instead of padding. So you can do the following. I have added some margin to implement the space between the divs. The margin that the fixed divs should be added to the margin-left of the fluid div.

Here is the updated demo in a jsfiddle.

In your codepen you just need to add .fluid { margin-left: 220px; } as you can see here.