0

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.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
merlin
  • 2,717
  • 3
  • 29
  • 59

2 Answers2

2

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.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • I think the padding-right of 300px makes the (definitely correct) solution looks a bit messed up when looking at it on small screens (just had a look at it). (just put up the same in a codepen: http://codepen.io/anon/pen/wazOLP ) – jBear Graphics May 23 '15 at 10:54
  • @j.bearGraphics That's a good point, I had the window full screen and didn't even notice. I adjusted my example with smaller widths – Tasos K. May 23 '15 at 12:56
  • This looks like it leads to the right solution. I have put your code added by my adaption here: http://codepen.io/anon/pen/xGENxd What I want to do is a navigation footer. There should be white space between the columns, could not get this done with your example. Any ideas how to adapt this? – merlin May 23 '15 at 16:03
  • My answer at the bottom is different to the one up here. anyway: two solutions: add a whitespace by adding divs inbetween with having a width equal to the whitespace you want, OR, use the holy grail layout I added... ;) – jBear Graphics May 23 '15 at 16:26
  • @merlin One clarification. I used in my first answer `padding-right` where the correct would be `padding-left`. I have updated my answer to be correct. – Tasos K. May 23 '15 at 17:10
  • @merlin For your example now, I believe that your issue is not to have the background color of the fluid div in the margins of the fixed divs. For that case, you can safely use `margin-left` instead of `padding-left`. I updated my answer with a simple demo and I updated your codepen so that you also see it in your example – Tasos K. May 23 '15 at 17:12
1

Try to use the same solution used for the "Holy Grail Layout" (two sidebars sticking on the left and right and a fluid column in the middle). It also works if used with more than one column on the left and no column on the right:

EDIT: the stackoverflow answer is built for a grid, I changed it slightly to fit it for my needs (fixed/fixed/fluid/fixed)... as soon as I find it, I will post the edited solution!

CSS fluid columns, fixed margins; the holy grail of holy grails (This link provides a full explanation including an example)

Another example is this version by Matthew James Taylor: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

You can even put a fluid column in the first place, or in the middle by using this layout.

Community
  • 1
  • 1
jBear Graphics
  • 153
  • 1
  • 7
  • This mitght be a good solution for a website layout. I am looking for a navigation layout with fixed,fixed,fluid. – merlin May 23 '15 at 16:23