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.