When you start implementing the layout of a website using CSS and HTML DIVs, you will inevitably come across the following problem:

How do I force two columns to be of the same height?

You want to get something like this:

But whatever you do, you are not able to extend the sidebar till the footer. You end up with something like this:

Many have suggested using some tricky CSS techniques to get around the problem, while in fact none of the techniques work perfectly in all cases. It is tedious to make these methods work in many situations.

Some have suggested techniques such as tiling a background image to give a false impression of long columns. This technique is called faux columns. This hack almost works, but you know –  it is a dirty hack too.

People always despise using a JavaScript based solution for this problem. I don’t know why, but let me tell you the truth – a JavaScript based solution for this problem is not worse than any other solution. In fact if you are using JavaScript, you may save a few hours of frustration of trying to get things working. People will warn you against this by saying “What will happen if the user turned off JavaScript?“. Believe me, if the user has turned off JavaScript, most of the web is broken for him anyway. Your sidebar does not matter to him. Don’t pretend like it does.

Here is how you can get around the problem using JQuery:

Put something like this in your ready event handler:

$(".sidebar").height(Math.max($(".content").height(), $(".sidebar").height()));

That’s it. Now start getting things done instead of tinkering with all these small details; and quit trying to use CSS to to solve every crazy problem.