What do you do when

height: 100%

doesn’t work? The safest and easiest way to get your main column and sidebar column to match, height-wise, is to use a background image in order to hide the actual lengths of the columns.

<div id=”wrapper”>
<div class=”maincolumn”> content </div>
<div class=”sidebar”> sidebar content </div>
</div>

Apply a background image to the wrapper

div

using CSS:

#wrapper{
background: url(images/background_image_name.gif);
}

That background image codes should go in your

style.css

file. The example above assumes that your background image sits in the folder named, images.

To create or design the background image, use a design software like Photoshop. (That’s what I use.) Create a new file with a width that matches the sum of the main column and sidebar column widths. For example, if your main column is 500px (5 inches) wide and the sidebar is 200px wide, and there’s no margins in between the two columns, then your overall width is 700px. That’s how wide your background image should be.

Once the background image is applied to the wrapper

div

, it’ll repeat itself over and over again to cover the entire length of both columns. So really, all you would need, in this case, is a 700px (width) by 1px (height) background image.

Note: If you use float left or float right for any or both main and sidebar columns, you must use

float

for the wrapper

div

too. Otherwise, your background image for the wrapper

div

will not display correctly.