3 column CSS layout using "display: table", content loads first by using a table-cell semi-hack

(valid CSS, but not supported by IE lte 7)





Sidebar left content goes here!

(Text continues below the ad)

Back to the post at nekkidblogger.com

Works well with

IE8, Safari 4.0, Opera 10.10, Safari 3.21, Firefox 3.6, Navigator 9.006, Chrome 3, Gecko 2008.0, all on XP or higher, and Galleon 2.06 on Ubuntu

Degrades nicely to a table with "table hack" in IE7, IE6 has a slight problem (requires absolute div to have same background color as original left sidebar to fix).

Does not work with

Flock 2.5.2, Minefield 3.7, Sea Monkey, IE 6.0 and 5.5 on Win 2000,

Problem with this layout:

The left sidebar is an absolutely positioned div, so it is taken out of the document flow. It will always be as high as the highest of the two other columns (but only that high). The other two columns do not adjust to the height of the left sidebar (nor does it affect the placement of the footer). Thus if may overflow the container and "spill" content into the footer and even below the content of the page.

It can be dealt with by setting "overflow: hidden;" (as I have done here) to cut off excess content in the left sidebar, or by simply making certain the left sidebar is shorter than the other two. The overflow can also be set to "auto" to make a scrollbar appear (not very good looking though).

You can also use Java to force clearing of absolute elements - see for instance the Inman Position Clearing (IPC) technique.

If you believe it important for SEO reasons, it is possible (and easy) to load the header after the content too by using either absolute positioning or a negative top margin.