Go to Advanced version with equal columns and sticky footer.

Original 3 column layouts (circa 2003)

Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content goes here :

How it works - in brief

This layout uses three floats for the columns even though the middle column is a fluid width we can achieve this by using a 100% width float for the middle column and then applying a right negative margin equal to the widths of the left and right columns.

A negative margin on the opposite side of a float (opposite to the direction it is floated) doesn't change the width of a float but instead allows other content to approach from that side by the amount of the negative margin.

This would result in overlap of course so we need one extra html element to nest inside the middle floated column that has a margin-right equal to the combined width of the left and right floats and this then keeps the content clear of the side floats.

The benefit of floating all three columns is that we avoid the 3 pixel jog in IE6 and it also allows the html to remain in sensible source order in that left, middle and right columns follow each other logically in the html.

The drawback of this technique is that you must control the minimum width of the center column before the ocntent overflows or the columns will drop in IE6.

The min max routine for IE6 (as ie6 doesn't understand min/max width) is provided by javascript and a once only expression which avoids the speed issues with using expressions. (See Steve Souders for more information on this.)