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: ![]()
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.