Take the 2-minute tour ×

I know this kind of question get asked everyday, but I don't seem to find a solution to this particular one...

So, the idea is pretty simple, I want to create a 3 column fixed width layout, with 100% width header and footer.

Everything seems to work aside from the footer.

Here is an example: http://jsfiddle.net/xMQLy/1/

So essentially the problem seems to be that, because the main body + lateral columns does not have a fixed height, the footer is not positioned at their bottom.

How would I go fixing that?


share|improve this question
Your CSS appears to be incomplete. It abruptly ends at .rightcol. –  thirtydot Oct 8 '11 at 13:15
@thirtydot: you probably clicked during those 30sec it took me to realize I did not save the final version :) Now it works –  nico Oct 8 '11 at 13:17
You shouldn't be using position: absolute so much. –  thirtydot Oct 8 '11 at 13:22
@thirtydot: please feel free to provide a solution without it :) –  nico Oct 8 '11 at 13:24
add comment

1 Answer

up vote 3 down vote accepted

Using absolute or fixed for the position CSS property rips an element from the context of the parent. So, the parent width/height won't be affected by this child's size. The float properties also have this effect: It's not possible to effectively style using position:absolute/fixed or float.

I've thrown away these properties, and revised your code: @Fiddle: http://jsfiddle.net/xMQLy/5/

Some changes:

  • Thrown away useless CSS properties:
    `.leftcol and .rightcol {floar:right/left}
  • Grouped together common styles (.leftcol, .main, .rightcol).
  • Updated HTML source, added a <div class="wrapper-align"> wrapper around each div in the source, and removed whitespace between these wrappers [1]

The .leftcol, .main, .rightcol elements can be positioned next to each other applying display:inline-block on each div. However, the default alignment for these elements is the bottom. Because the columns have to be located at the top, vertical-align:top has to be used. This CSS property can only be used at inline elements. To achieve this layout without messing with float or display:absolute/fixed, an inline wrapper around a display-block element is necessary.

The whitespaces have to be removed, to prevent creating a gap between the elements. To illustrate, compare these pages: No whitespace vs White space.

share|improve this answer
+1 although it does not work if the columns are longer then the main content. –  nico Oct 8 '11 at 13:25
you're right about the floats... leftovers from previous trials –  nico Oct 8 '11 at 13:28
Working on that atm. I'm getting rid of all position:absolute properties. –  Rob W Oct 8 '11 at 13:28
thanks, if you could make it without absolute it would be great. I've been trying that all morning and it's really driving me mad... –  nico Oct 8 '11 at 13:30
Wow! That looks very promising! I had to change wrapper-align to inline-block too, in order for it to work in Chrome and Safari and, obviously IE6 and IE7 don't like it... I have to see if I can safely adapt it to the real website now. –  nico Oct 8 '11 at 14:49
show 7 more comments

Your Answer


