html - How to use height:50% if the container height is not defined? -

i use height:50%, container's height not defined, what's correct solution?

<div id="container">     <div id="left-50">         <div id="left-50-1">1</div>         <div id="left-50-2">2</div>     </div>     <div id="image">         <img src="http://automarka.hu/images/stories/audi%20a8%202.8%20v6%20fsi%202007.jpg">     </div> </div>  #container {     overflow:hidden; }  #left-50 {     float:left; }  #left-50-1 {     height:50%;     width:50px;     background:yellow; }  #left-50-2 {     height:50%;     width:50px;     background:purple; }  #image {     float:left; } 

jsfiddle url: http://jsfiddle.net/xqmdf/

the correct solution define container height. or refer body or other defined element.

make container display:inline-block; adjust image height ... or define fixed height.

demo: http://jsfiddle.net/xqmdf/2/