How To Use Faux Columns

Web developers have been frustrated by the apparent inability of css to provide for equal length columns. It isn't a shortcoming of css, but rather of IE. IE doesn't support the table-group values of the display property, which means we must work around its shortcomings.

Fortunately, there is a work-around we call faux columns. It was introduced by Dan Cederholm in an article in A List Apart back in 2004.

In a nutshell, the method calls for using a background image on the parent element of the columns. The two columns are not actually made equal in height, but the columns' parent is as high as the longest column. A background image on the parent will also extend the full height of the longer column.

For this page, a 260×10px image is used as the background for the #main div, which holds the #content and #sidebar divs. This is the image used: a solid green color with a darker strip down the left side

Notice the slightly darker strip on the left side. It acts as a border of sorts to create a sense of completion, rather than simply letting the color end. Without the strip, the color appears to blur in transition. It's completely optional, but I like it.

Compare the left and right sides. The right side lacks that terminator—its edge is less defined.