Three-column CSS layout

There are many established CSS layouts for doing a three-column website. They seem to work pretty well. Perhaps the most popular is the Faux Columns technique.

At work we are working on an internal site that requires three columns (or to be more precise, up to two sidebars). I have never been completely satisfied with the many existing three-column hacks so I decided to roll my own after laying out some requirements:

• The unstyled page should look decent (primarily for mobile browsers). This includes having the sidebars come after the main content in the HTML source.
• The sidebar backgrounds should extend down to the header, without using any background image tricks.
• IE7 and FF2+ must render the layout correctly. Minor defects are ok in other browsers.

The sidebar backgrounds have always been the tricky part, but I have a non-image solution for IE7 and FF2+. It also works in Safari.

IE6 does not extend the background colors to the footer, but it does correctly position the sidebars at least. After a bit of hackery anyway. Apparently IE6 doesn’t correctly compute the correct X position for absolutely-positioned elements. left:0px was making the left sidebar overlap with the content. I replaced this with float:left and IE6 positioned it like the other browsers, and thankfully the other browsers continued to position it in the same place. So as a bonus, no IE conditional comments were required.

Anyway, here it is. I am releasing the CSS and HTML source to the public domain, but if you reuse the code a link to this post would be appreciated.