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 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

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.

Answer 3

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>