How to make the two div at the same line with the same height by browser

For example,this is my page layout,

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   + 开发者_JS百科    +       +
+       +       + 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/

---

Try to add min-height:500px; to div1, div2 etc. Min-height property set on parent container doesn't mean that divs inside will have at last 500 px aswell.

---

When you set div1, div2, div3 with float property, whichever is tallest will determine the height of container div.

Using Faux Colums is one way to fix this.