Inline-block expand height parent container

Question

I have 2 div elements side by side that are set as inline-block. They both reside within a containing div. I have set the right div to height 100% but because the height of the containing div is dynamic it won't expand. Does anyone know how to make the right hand div (coulmn) expand to the dynamic height of the containing div?

<div class="container">
<div class="left_column">Dynamic Content In Here</div>
<div class="right_column">Side bar to expand to the height of the containing div</div>
</div>

Thanks

Oliver

Answer 1

After having some issues with the same problem, the simplest solution is, in my opinion, to use table-cell as the display property. It works perfectly fine!

Answer 2

I think you search something like this:

.container {
    min-height: 700px;
}

.right_column {
    min-height: inherit;
}

Also see this jsfiddle.