Creating Columns Of Equal Heights Using Divs

Sometimes we want to create a layout with multiple columns, this multiple column layout used to be created with tables. Now we use CSS to layout out pages and we can create multicolumn layouts by floating divs left. The problem with using divs and floating them left of each other is that the columns cannot automaticly adjust their heights dependent on other columns within the row.

This can be done using divs with the display atribute set to table. By using the attributes table, table-row and table-cell we can create a purely css layout with columns that expand with the rest of the columns within the table row.

The html would look like:

         content

         some more
         content

And the css:

.column-wrapper {
display:table;
width:100%;
}

.column-row {
display:table-row;
width:100%;
}

.column-row {
display:table-cell;
width:100%;
}

Some brwosers you can simply use the table element, however safari requires that tables have nested table-row and table-cell elements.