Faux Columns

Making 2 or more side by side columns the same height regardless of the amount of content in the individual columns is one of the perplexing issues facing the novice or hobby web designer. Most first time efforts involve setting the height on all the columns the same, trying to make them just tall enough to work…but it doesn’t.

First, setting heights in div tags have some pitfalls and should be discouraged in most cases. One of the methods to create even height div tags is called Faux Columns, which involves creating a background image that will give the illusion of even heights.

Lets take a look at a page I created to illustrate how faux columns work. It’s not pretty as I used some pretty bright colors, but it should get the lesson across.

Faux Test Page

First, you will notice I have centered the page. I have a header then we have a container div. This holds the 3 columns that we will apply the background image to.

This is the CSS for the container div, as this is where all the rules for creating the faux columns:

#container {
width:800px;
margin:auto;
background-image:url(images/fauxtest.png);
background-repeat:repeat-y;
overflow:hidden;
}

You see this line: background-image:url(images/fauxtest.png);, which is an image that looks like this:

faux image small

The image width is the same as the container div, and the different colors of the background image are the same widths as the individual columns or divs.

We have this image set to repeat-y, or vertically. It is set in the container and the overflow is set to hidden. This will make the image repeat vertically to the tallest div, which means the other 2 divs in my example will have the background color also set to the tallest div.

So again, if you look at the example page, you will see I set the content, or the text to different heights, but all of the columns appear to be even heights.

What you should do is to open the sample page, view the source, copy the code and paste it into a new page. Download the image, here and put it in your images folder. Put the page on your server and viola, you have a faux column page. It is a good idea for you to change some settings, add/remove content to get some familiarity with the rules.

So if you are creating a page with two columns or four or more, the principle remains the same. Create an image that will be your background image, have the widths of the different colors of this image the same as the widths of your columns or divs. Place that image in your container div, have it repeat-y and set the overflow to hidden, and you are done!

There are some other examples you can get from the sample page, such as I also created a mini-faux column in the right column as well as examples of floating divs in within other elements.

Hopefully you found this helpfully for you.