First time visitor? The tutorials start here.

Equal-Height Columns with CSS

Aug 4, 2009 edit: It has been brought to my attention that the overflow:hidden; required for this layout causes a bug when dealing with links that lead to a specific part of the page, and I don’t know why I hadn’t considered that before. After researching this issue and seeing others say it’s impossible to correct, I tried various methods myself to no avail. With no actual fix, I’ll see if I can at least come up with a good workaround and amend this page again. At any rate, if anchor links aren’t an issue for you, continue with the original tutorial…

The Challenge

Even some of the best website developers have had so much trouble with this one, that they have resorted to using images to create faux columns, javascript to “sniff out” the height of the tallest column and resize the others accordingly, or they just given up completely and used a table.

I even came across one tutorial the other day that uses one div for each column’s background color and another div for each column’s content (using 6 divs for 3 columns), then shifts them around every which way to create the illusion of columns. It was creative and got the job done, but only if your layout takes up the entire width of the page, and it used twice as many divs as necessary.

Cross-browser friendly

The method I will teach you today has been tested and works in the following browsers:

Windows: Firefox 3.0.10, Opera 9.64, Flock 2.0.3, Safari 3.2.1, Google Chrome, IE8, IE7, IE6, and even IE5.5. Not that IE5.5 really matters anymore, but it’s still nice to know.

Mac: Firefox 1.0, IE5.2, Safari 1.3.2

I realize the Firefox and Safari for Mac I tested in are severely outdated, but it’s what I had access to. Besides, if they work in such old versions of those browsers, they should work in the current ones, as well.

Ubuntu 9.04: FF3

How to do it

First, open up Crimson Editor, Text Wrangler, Notepad, or whatever text editor you happen to have handy. Then, paste this in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head><title>Equal Height Columns</title>
<link rel="stylesheet" href="columns.css" />
</head>
<body>
<h1>Equal Height Columns</h1>
<div id="column_wrapper">


</div><!-- end column wrapper -->
</body>
</html>

Now, save that file as “columns.htm”.

So far, what we have is the basic skeleton of a web page, plus a link to a CSS file that doesn’t exist yet, a big heading, and the <div> that will eventually contain 3 columns. Notice that I have given it an id of “column_wrapper” to show what its purpose will be, although I could have given it any name.

If you look at this page in a web browser, all you will see at this point is a big heading that says, “Equal Height Columns.”

The 3 columns

Well, they won’t be columns until you create that CSS file and tell them to be columns. But for now, let’s add 3 divs inside that column_wrapper div, and let’s name them “column1,” “column2,” and “column3.”

<div id="column1">
  <h2>Column 1</h2>
    <p>Some content here</p>
</div><!-- end column1 -->
<div id="column2">
  <h2>Column 2</h2>
    <p>Some content here</p>
    <p>Some more content here</p>
    <p>Even more content here</p>
</div><!-- end column2 -->
<div id="column3">
  <h2>Column 3</h2>
    <p>Some content here</p>
</div><!-- end column3 -->

You should have put that in the blank space between <div id=”column_wrapper”> and its closing </div>.

Now save the file again, and look at it in any web browser. This is pretty much how every web page should look before you style it with CSS. Speaking of CSS…

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.