Articles / Faux Columns Extended
Dan Cederholm offers an amazing collection of resources for styling webpages. One of my favourite techniques is Faux Columns.
It is a handy technique to use when you need columns that extend the whole height of the page. Often in CSS-based design, one column ends up getting "cut short" because there is less content. Faux Columns overcomes that problem by giving the appearance of columns. The Faux Columns technique could also be used to provide dotted column borders that display consistently in all borders and where the designer could control the spacing between the dots.
Often, however, I want to include a patterned background on a webpage, so it makes it difficult to use the Faux Columns technique. However, Cameron Moll overcame this partially by simply using a very wide image. The problem—at least in theory—with Cameron's creative approach is that on browsers with a resolution larger than 1590 pixels would start to see blank bars on either side of the background image. Granted, it is unlikely that anyone with a screen resolution that large would have his/her browser maximised to the full screen width.
In addition to the above issue, I also have come across page designs I have done where the amount of copy is small enough that I do not need the columns to display for the entire page. Rather, I only need columns as long as the longest amount of copy.
In either case, I have found the best solution is to apply the Faux Columns technique not to the body element, but rather in a division (<div>) element that wraps everything else. Some people refer to this as a container or wrapper.
This works fairly well when both columns are roughly the same height in content. However, when one column is significantly longer than the other is, the Faux Columns technique appears to stop at the shortest column and copy of the longer column appears to overflow out of its column.
But as usual, there is a solution. The key is to make sure that the last element is a block element.
For example, say your last element in the page is an image of a red hot pepper. You could do one of two things. You can add it to a footer division.
<div id="footer">
You could add an id to the image in the HTML
<img id="pepper" src="/images/pepper.gif" alt="Hot Pepper" />
and set the image to a block display in the CSS.
img#pepper
{
display : block;
}
Now you should have Faux Columns without having to apply them to the body element.
