Columns with full-height vertical borders

I want the two vertical borders in this mockup to be the same height (i.e., the height of the containing block):

As you can see, the left border looks good (because the开发者_StackOverflow中文版 left column is the tallest column), but the right border is too short (since the middle column is shorter than the left column)

I know I can do this by giving the containing block an explicit height and giving each child a height of 100%, but I'd prefer not to do this – instead I'd like to allow for different height "forum thread holders" without ugly scrollbars / overflow

You could do this...

HTML

<div id="container">
    <div id="left">
        abc
    </div>
    <div id="right">
        def
   </div>
</div>

CSS

#container {
       overflow: hidden;
}

#left,
#right {
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

jsFiddle.

Your cloud use this wonderful piece of jQuery code -

function equalHeight(group) {
var tallest = 0;
group.each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
group.height(tallest);
}

What it basically does is it finds the height of the tallest element in the group an adjusts the others elements heights to it. This way even of you change the content of the elements the height will still be adjusted. Just call the function like this

 equalHeight($('name_of_parent_element'));