Home Tutorials Equal Height Columns WordPress Theme

Equal Height Columns WordPress Theme

Author

Date

Updated on

Category

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Oxygen Builder Review

Free from all sorts of coding hassles and an abundance of options that cater to the users’ needs, Oxygen 2.0 is probably the best...

Basic Guide to Online Backup

A Basic Guide to Online Backup You may have heard of it, know you need it, but what exactly is it? Online backup is the...

Web Hosting Hub Review

How did it begin? Based in Virginia Beach, Web hosting hub has been on the market since 2001. If it were not for Web Hosting...

Recent comments