CSS Layout with Columns of Equal Length

#center

The problem with making a switch from table based layouts to Cascading Stylesheets Layout is wanting to make a design with multiple column and the column are all of the same length. I finally achieved the same effect of three columns that are really the same length by using display: table-cell.

From my test, it works with Mozilla 1.4 and Opera 7; it does not work with Internet Explorer 6.

Further discussion on this example can be found with CSS-Discuss.

© 2003 Seamus P. H. Leahy
You may take and improve upon this.

#left

The HTML

<div id="main"> <div id="right">right</div> <div id="center">center</div> <div id="right">right</div> </div>

The CSS

body #main{ display: table; } body #main > *{ display: table-cell; }