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

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments