Equal-height nested divs

Question

There are 2 nested divs on both left and right column with varying heights.
These divs form a frame-like shape. See http://jsfiddle.net/5fA3q/.

I've tried different css equal-height-tricks, they work but not in this condition and almost got it to work with
padding-bottom:999999px;
margin-bottom:-999999px;
and absolute positioning the shorter inner-div.

But alas, the padding-bottom is gone. See http://jsfiddle.net/5fA3q/11/

I hope someone knows the workaround.

Answer 1

You can use display:table-cell, but be aware that it doesn't work on old browsers.

HTML:

<div class="wrapper">
    <div class="left">
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>
         <p>Left</p>           
    </div>
    <div class="separator"></div>
    <div class="right">
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
        <p>Right</p>
    </div>
</div>
<div class="footer"></div>

CSS:

.wrapper{
    width: 500px;
    display:table;
}
.wrapper>div{display:table-cell;}
.left{
    border:10px solid #0188ed;
    margin-right:10px;
    background: #0150e1;
    width: 180px;   
}
.right{
    width:270px;
    border:10px solid #0188ed;
    background: #0150e1;
}
.footer{
    background:#0181ec;
    height: 50px;
    width: 500px;
    border-top: 10px solid #ffffff;
}

DEMO: http://jsfiddle.net/5fA3q/12/