How to make both div on the same line with the same height by the browser

advertisements

For example,this is my page layout,

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

As shown,the div1 and div2 and div3 are at the same line,

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

But they do not own the same height since the content of them are not the same.

Even I set the min-height of their parent element,and set the height of the to 100%.

I thought the div#container's height must > 500px.

And the three divs'height are all 100%,so they should take at least 500px.

But it seems that I am wrong. I wonder what is going on?

BWT,inside the div2 there is just a icon which used to toggle the div1(use jquery),however when the div1 hidden,the div3 also take only 80% of the browser window,how to make the div2 and div3 take the whole window?

I know I can use the jquery to set their size,but I wonder if this can be implemented by the browser?


Floats don't calculate their height based on the height of their parent when you specify it in %. So your 100% doesn't refer to the height of the parent. The approach that you should probably chase is using position:absolute; top:0; bottom:0; instead of float:left; height 100%; The only issue then is that the parent (in your case container) will not grow according to any of it's children's height. You should then either specify the height for container or make any of it's children columns not position:abosute. Try this:

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>

jsfiddle: http://jsfiddle.net/jVRpK/