Equal Height Columns WordPress Theme

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>

Apply a background image to the wrapper


using CSS:

background: url(images/background_image_name.gif);

That background image codes should go in your


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


, 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


for the wrapper


too. Otherwise, your background image for the wrapper


will not display correctly.

You May Also Like

Avatar of Jazib Zaman

About the Author: Jazib Zaman

Leave a Reply

Your email address will not be published. Required fields are marked *