Creating Columns using Tables

The simplest use for CSS tables is to create two (or more) columns of equal height. The HTML to do this is quite straightforward since all we need is two divs for the two columns. We'll give them both the same class so that we can use the class to define the divs appropriately in the CSS.

<div class="col"></div>
<div class="col"></div>

The CSS to make these divs into two equal height columns is equally simple.

.col {display;table-cell;}

As long as none of the content surrounding our two columns uses any of the CSS table properties this is all that we need in order to have the content of both divs automatically have the same height. We will most liely have other CSS to style our divs though so as to define the widths for our columns and any backgrounds etc that we want the columns to have.

To add additional columns of the same height we simply add futher divs immediately following the two we already have and define the extra divs exactly the same way as the first two.

The only ime things become more complicated is if we have other CSS tables immediately adjacent to these columns. If that is the case then the simplest solution is to wrap our columns inside another div and assign display:table to that div so that the browser knows that these particular table cells are not a part of the same table as the adjacent table cells. For example to have two adjacent sets of columns where each set of columns has the same height but the separate sets need not have the same height we could use:

<div class="set">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="set">
<div class="col">
</div>
<div class="col"></div>
;</div>

with our CSS containing:

.set {display;table;}
.col {display;table-cell;}

We now have four columns where the first two columns will always be the same height and the last two columns will always be the same height but the first two columns need not be the same height as the last two. As the pairs of columns are considered to be completely separate we might still need to add to our CSS if we want the four columns to display side by side. The simplest way to do that is to add float;left to the .set definition.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate