The Matching Columns Script Video Tutorial: Matching CSS div Heights
April 4, 2006
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.
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.
- Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
- It is much easier/faster to apply than the ‘Faux columns’ hack.
Attached with this article you will find the files you need to apply the script:
- The Javascipt file.
- The CSS document.
- A sample web page that puts it altogether.
Now it’s time to watch the video to learn how to use it.
There is one downside to this technique:
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.