Matching column height in 2column layout

Question

My website uses 2 columns, but the only way I\'ve been able to get the columns height to match is to use a fixed height, but this presents a \"scrollbar in a scrollbar\" iss

Answer 1

I always catch grief for suggesting this, but I've found the best, most dependable way of doing this is to utilize Javascript (in this case, jQuery) to make all of the columns the same height as the tallest column. See my live example.

Live Demo http://jsfiddle.net/T9VUc/1/

If you want to do this on the page load, try this. Keep in mind, this procedure uses jQuery, so you will need to include that in your page

var tallest=0;

$(document).ready(function() {
    $('.col').each(function(){
        if($(this).height() > tallest)
           tallest = $(this).height();
    });
    $('.col').css('height', tallest + 'px');
});

Live Demo on Page Load http://jsfiddle.net/T9VUc/2/

UPDATE

Based on the URL you gave me, I suggest adding

to the end of your 2nd div like this ...

    ...


    ...
    

        ...