First time visitor? The tutorials start here.

Equal-Height Columns with CSS

The CSS

In order to make the 3 sections appear side by side instead of one on top of another, you need to float them. There are other methods for putting sections side by side, but for equal-height columns, you will need to use floats.

In your text editor, paste this into a blank file:

#column1, #column2, #column3 {
    float: left;
}

Save as “columns.css”. You’ll need to put this in the same directory as “columns.htm” in order for it to work, unless you want to change the <link> tag in “columns.htm” to make it work from a different directory.

Now, refresh “columns.htm” in your browser and see how it changed. You’ll see the big heading and 3 columns, each with their own smaller heading.

Now let’s give each of those columns its own background color, by adding this to the CSS file:

#column1 {
   background: #f99;
}
#column2 {
   background: #ccc;
}
#column3 {
   background: #99f;
}

Save, then refresh the page in your browser. Now you can see how the columns are different heights, and this is where the first trick comes in.

Positive padding, negative margin

In that first part of your CSS where you have this:

#column1, #column2, #column3 {
    float: left;
}

…you’ll need to add enough padding at the bottom of all 3 columns, so that it more than adequately covers the difference in length between the shortest column and the longest column. For instance, add the part in bold to that CSS:

#column1, #column2, #column3 {
    float: left;
    padding-bottom: 5em;
}

Save the CSS file, then refresh columns.htm in your browser and look at it. The background color in the 1st and 3rd columns now extend below the text in the longer center column.

But… what if you add content to that middle column? The 1st and 3rd column will no longer be long enough. For this reason, give your columns a lot of padding, like 500em:

#column1, #column2, #column3 {
    float: left;
    padding-bottom: 500em;
}

Save that CSS, then refresh your browser. That should cover most sites, but feel free to add even more padding.

Now, scroll down to the bottom of that page, and you’ll see that the columns are still not the same height, plus they are now outlandishly long. The solution to this is two-fold. First, you’ll need a negative margin-bottom on the columns to counteract the positive padding. In addition, do you remember the “column_wrapper” div? You will use this div to basically cut off the excess length from the columns.

Add this line to your columns:

#column1, #column2, #column3 {
    float: left;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

Then add this to your CSS, as well:

#column_wrapper {
	overflow: hidden;
}

Save your CSS file, then refresh your browser. The columns are now all the same height. 🙂

When we continue, I will teach you how to make practical use of those columns by fixing that page up so it looks more like this: Equal-height columns sample

May 25 update: Here it is… Putting equal height columns to practical use

This post has multiple pages. Go to page: 1 2

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (3)

pastor rickJune 3rd, 2009 at 11:37 am

You must be a mind reader 😆

My current project has this as one of my design goals!!!

LesaJune 5th, 2009 at 8:05 pm

You might find my next one useful as well, just as soon as I can muster up the energy to write the post. I’ve been half asleep every evening this week. 😛

RadomirMarch 29th, 2016 at 12:04 pm

I want to thank You for this tutorial, it help me a lot 🙂 🙂 🙂 🙂 🙂 🙂 🙂 🙂 🙂

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.