Parent container height extension built-in

Question

I have two side-by-side div elements that are set as an inline block. They are both inside the containing div. I set the correct div to 100% height, but since the height of the containing div is dynamic, it will not expand. Does anyone know how to make the div (coulmn) of the right hand 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

I think you are looking for something like this:

 .container { min-height: 700px; } .right_column { min-height: inherit; } 

See also jsfiddle .

Answer 2

After some problems with the same problem, the simplest solution, in my opinion, is to use table-cell as a display property. It works great!

Answer 3

Try adding:

 html, body { height:100%; } #container { min-height:100%; }