3 column layout with fluid/liquid central column, rounded boxes, alpha transparency

The goal is to achieve a three column layout either with or without columns of equal height. The columns should be fully skinnable in that they are capable of displaying the graphics which make up a box with rounded corners, or for that matter any other graphical effect which requires the compositing and tiling of various images to form a box. It should also be possible to use alpha transparency, which raises issues with some standard layout techniques which rely on block elements sliding over or obscuring each other. The central column should expand to fill the available horizontal space in the browser and the two side columns should grow to accomodate the widest element contained therein when necessary. The markup used should be as semantically neutral as possible, with CSS used in place of presentational HTML.

Below I have listed a number of techniques that attempt to solve this problem:

• Columns set their own height
• Side columns grow with central column
• Using a table to automatically grow the columns
• Using display: table to automatically grow columns

You may also want to look at the resources used on this page.

Please note: at present this page will not display correctly in versions of Internet Explorer lower than 7. This is because the intended audience is web developers who are almost certain to have access to a real browser if they want to see the alpha effects. The page is readable without them but doesn't look as good. It is simple enough to add alpha support to earlier versions of IE using the AlphaImageLoader, but at this revision I simply can't be bothered.

Columns set their own height

Columns are left to their own devices in terms of height. In order to have a 3 column layout without using display: table, which isn't supported by any version of Internet Explorer, the two side columns must have an explicit width (though this can be in em/ex to facilitate graceful re-sizing of text). The central column, however, is completely fluid.

Advantages	Disadvantages
Cross-browser Column widths scale with text	Some designs require three columns of equal height Right column appears before middle content in the markup Content may be nested as much as six divs deep!

Conclusion

Because it is fluid and works in Internet Explorer this is the best layout to use if the columns don't need to be the same height.

^ Top of page

Side columns grow with central column

The different elements are nested in such a way that the central column also contains the backgrounds for the middle part of both side columns. It does this by wrapping divs with left and right positioned backgrounds around the div that holds the central column. Unfortunately this means that we have to have the widths of our side columns set as a fixed number of pixels, because we can't scale background images using CSS. Inline elements which are wider than our side columns will spill over the edges. You can see this by increasing the text size in your browser.

The other issue, which makes this particular layout technique essentially useless, is that the design breaks if the content of either of the side columns is taller than the content in the middle column. This is illustrated in the second of the two examples below.

This is one of the more common techniques used for three columns of equal height when you are not using rounded boxes and transparent backgrounds. Example 3-col layout at http://pixy.cz.

Usually this technique relies on having block level elements nested three deep, each with a different background. The two side columns have the background for the middle column behind them, but you can't see it because they cover it completely. Because our side columns are transparent this doesn't work

Advantages	Disadvantages
Cross-browser	Column widths do not scale with text Right column appears before middle content in the markup Content may be nested as much as six divs deep! Design breaks if side column content is taller than middle column content

Conclusion

This technique is all but useless. If for some reason you want to have three columns of equal height, and you know for certain that the content in the side columns will never be taller than the content in the middle column, it's a good cross-browser approach. Otherwise avoid like the plague.

^ Top of page

Using a table to automatically grow the columns

This approach uses the table layout paradigm to ensure that the three columns are equal height. It does not require nested tables to achieve, however the abuse of tables for laying out non-tabular data is not considered to be semantic markup and generally frowned upon.

Advantages	Disadvantages
Cross-browser Does not require floats and therefore does not need to be followed by a clearing element Works in Internet Explorer whereas display: table doesn't Does not require elements to be nested as deeply	Uses tables for non-tabular layout purposes, not semantically meaningful markup

Conclusion

This is a good technique to use in conjunction with browser sniffing - precisely the same layout effect can be achieved without the abuse of tables for layout by using semantic markup and display: table, display: table-row, display: table-cell etc., but those CSS properties don't work in Internet Explorer. By using browser sniffing you can serve compliant browsers with the semantically correct layout (shown below, Using display: table to automatically grow columns) and serve IE with a table layout. The upside to this is that if the browser sniffing fails, the browser will still be served something that though it is semantically rubbish, still renders properly.

^ Top of page

Using display: table to automatically grow columns

Like the example above, this approach uses the table layout paradigm to ensure that the three columns are equal height. However, it does this using semantic markup which has table behaviour added at the CSS level. Unfortunately Internet Explorer (as at the current release, IE 7 Beta 2) does not support display: table.

Advantages	Disadvantages
Does not require floats and therefore does not need to be followed by a clearing element Does not require elements to be nested as deeply Semantic/semantically neutral markup.	Does not work in Internet Explorer!

Conclusion

Of the techniques outlined there, this is the best solution to the problem at hand when three columns of equal height are required, except that Internet Explorer does not support the display: table CSS property. I recommended using this layout technique in conjunction with an ordinary table and some server-side browser sniffing. Basically, serve Internet Explorer the table layout, and everything else the display: table layout.

^ Top of page

Resources used on this page

Images

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Background image

Other files

• index.html
• 3col.css
• All files in .zip format (52.3KB)

^ Top of page