When working with a multi column layout where all three containers with dynamic content, you run into a problem with a css limitation (not able to do heigh: 100%;) so this problem has to be solved by using javascript.
Well, here’s the solution!
First write a function to include into the file (I usually use an external js function file so I can apply any of them anywhere needed.)
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Then to use it simply use the following code in your document.
$(document).ready(function(){
equalHeight($('.your_container'));
});
What this will do is find all elements with the class ‘.your_container’ and make them the same height on the document.
Source: CSS Newbie