Matching column height in 2column layout

Question

My site uses 2 columns, but the only way I was able to get the height of the columns is to use a fixed height, but this is a "scrollbar in scrollbar" where the content column should have overflow: auto;for all the content that will be visible, but if the user's browser does not make the entire page visible immediately; there are scroll bars on the page and in the content column.

I would like to make the height of the columns in the sidebar match the height of the content column. I was thinking about setting some javascript to load the page to do this, but I can't help but think about which is better.

This site 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 am pleased with the result (mostly). Where is my problem when the first section (sidebar) of each page (navbar) is smaller than the other section .see http://www.pcbuddies.co.za/Services/Default.aspx

In this situation, the content overflows through the site footer.

Answer 1

I wrote out a solution, but I rephrased the best example on this site here , which seems to me to work very well. It uses the trick to create columns with the same height, but it works very well - without javascript.

Here is an example of this in action: an example

Answer 2

, , , - Javascript ( jQuery), , . .

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

, . , jQuery, ,

var tallest=0;

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

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

URL-, , <div style='clear:both'></div> div, ...

<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

. :

Set both columns to a transparent background and create for them both containers with the desired background as alpha transparent png.

This may not be a “clean” solution, but it is certainly a simple one. By looking at the website you linked to, what would I do with it.