A common challenge in multiple-column web layout is displaying columns of equal height. This is a very reasonable design goal but not always the easiest design layout to implement. However, there are a few, different ways to accomplish equal height columns using modern, tableless layouts.

I mean…you could use the old, table-filled layout style but really…where’s the fun in that?

It’s certainly not fun to hunt down that missing table element tag in a mess of bloated markup. It’s also not standards-compliant because a table is intended to markup tabular data.

Faux Columns

One common, and fairly easy technique is called the “Faux Column” technique. This method was written about in 2004 by Dan Cedarholm.

It is called “Faux” because the columns are created by using a background image is used to create the appearance of columns. One way of implementing this technique is to float your column divs next to each other and position them on top of the background image. You can really position the columns however you like; relative, absolute, float.

This method is pretty straight-forward. However, if you decide to change the properties of your columns, you’ll need to edit the image. Not a big deal, but a little bit of a PITA. You can read more about how to implement the “faux column” technique at A List Apart. Read more about “Faux Column” layout technique.

One True Layout

Another, more complex method is the “One True Layout” technique. I recently used this technique for a really complex equal-height column layout. The great thing about this technique is that the columns are actually the height and width specified, as opposed to floating above an image. You can also order your source, which is great for SEO and alternate screen types (like cellphones, blackberries, etc.)

This is basically done by wrapping your column layout inside a div with overflow: hidden and adding a ridiculous amount of bottom padding and an equally ridiculous amount of negative bottom margin on a column. For instance, you might define a column as:

.column {
padding-bottom: 2000px;
margin-bottom: -2000px;
}

More information on “One True Layout” straight from the source…

These are, by no means, the only methods for creating equal height columns. There are other methods to create equal height columns in CSS that use different methods including hacks or javascript. These are the two, with which, I’ve had the most success and you’re sure to find your favorite ways to create equal height columns.