Equal height divs with footer always at bottom of tallest div

Question

I was wondering if this were possible, and if it is the best way to go about this: example image (since I'm not allowed to post pics yet ^^)

So, not only does each column have to be of equal height, but each column also has its own individual footer.

I saw this SO post — how could I rework this technique to apply to the bottom of the divs and not the bottom of the window?

Edit: each column will have content that will constantly change and be of variable height. I'm thinking I could just figure out the equal height columns first, then just absolute position a footer div within those columns. Does its parent div then have to be position: relative?

Answer 1

Looks like a nested div in each that has the same properties. So each outer div is the same size, and so do the inside div.

.outer
{
height:500px;
float:left;
margin-right:20px;
}

.inner
{
height:30px;
width:100%;
margin-top:-470px;
}

<div class="outer">
<div class="inner">

</div>
</div>

Didn't test this; off the top of my head!