Using Faux Columns

Faux columns is a technique used to create columns with 100% height. Since most website designers often mistake the “height: 100%;” CSS property as literaly as it seems, it simply will not work. Faux columns are used for this purpose.
What is a “Faux Column”?

A faux column is also known as a “fake column” since the word faux means fake. This technique is used to make a column with lets say a grey background extend all the way down to the bottom of their containing element such as a div. For tables of course this will work however valid XHTML and CSS calls for other elements such as the div tag, this technique will come to play. Take a look at my current design (the website you are currently viewing) to see this technique in action. You have probably noticed that my website is a two column design where the left column is for content and the right column for other featured content. They are both div elements however the outer most parent element (another div) contains the repeating background to give the appearance of having 2 columns. Since the outer most div contains the “height: auto;” property will always stretch or inherit the inner div column with the greatest height.
Make a Long Story Short…

In order to make a column appear to stretch all the way down the document, you will need to use a background image that repeats itself vertically on the outermost parent element or the “wrapping element”.