Positioning 100% width div at the bottom of a fixed width float

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 foo开发者_JS百科ter.

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?

thanks

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:
  .wrapper{position:relative;top:0}
`.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]

^[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.