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" issue where the content column has to have overflow: auto; for all the content to be seen, but if the user's browser doesn't make the entire page visible at once, both the page and the content column have scrollbars.

What I would like to do is match the sidebar columns height to that of the content column. I was thinking of setting some javascript on page load to do it, but I can't help thinking theres a better way.

The site in question is http://www.pcbuddies.co.za (for reference).

Any suggestions would be greatly appreciated. Thanks in advance!

EDIT 1
After applying the JQuery solution below, I'm happy with the result (mostly). Where I do have a problem is when the first section (sidebar) of every page (navbar) is smaller than another section see http://www.pcbuddies.co.za/Services/Default.aspx .

In this situation, the content is overflowing past the site's footer.

Answer 1

I wrote out a solution but I was paraphrasing a better example at this site here , which I find works very well. It uses a trick to create the equal height columns but works very well - without any javascript.

Here's an example of it in action: example

Answer 2

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 <div style='clear:both'></div> to the end of your 2nd div like this ...

<div id="Side" class="col">
    ...
</div>
<div class="content col">
    ...
    <div id="network" style="display: none;">
        ...
    </div>

    <div style='clear:both'></div>
</div>

Answer 3

The other solutions look a bit too complicated to me. How about this:

Set both of your columns to transparent background and make a container for both of them with the desired background as alpha-transparent png.

Maybe not the "cleanest" solution, but definitely a simple one. Looking at the website you linked, that's what I'd go with.