One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this ‘matching column heights’ in web pages.  

In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.

Let’s start  out by checking out a diagram that illustrates the problem:

People have come out with different solutions including the ‘Faux columns’ hack:  using a vertically tiled background image to create the illusion of a column.

The ‘Faux columns’ hack/trick works, but it does have some limitations:

• You have to mess around with background images when creating the fake/faux columns effect – there is even more mucking about when you have liquid layouts.
• You won’t be able to use CSS border styling (on your div’s that create the columns) because it would reveal the hack.

THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)

JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks/nerds, to have practically total control over how things appear in a web page – it’s very powerful.

Note: DOM scripting (the term,) is a quick way to describe using JavaScript to control a web page’s structure. If this makes no sense, don’t worry about it as you need no programming knowledge to use the technique that is covered here. 

 WHY IS THE JAVASCRIPT METHOD BETTER?

You are better off with the JavaScript method (rather than the ‘Faux columns’ hack, ) because:

1. Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
2. It is much easier/faster to apply than the ‘Faux columns’ hack.

 GETTING STARTED

Attached with this article you will find the files you need to apply the script:

1. The Javascipt file.
2. The CSS document.
3. A sample web page that puts it altogether.

Now it’s time to watch the video to learn how to use it.

 MATCHING DIV HEIGHTS VIDEO

CONCLUSION

There is one downside to this technique:

It won’t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.

That said, though it looks a lot better when your columns heights match, I would not consider it mission-critical to a website. That is to say; people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals, the columns will not match.

Source Files