after one hour of research i'm still stuck with my problem.
I want to make one menu on the left with a fixed width and variable height. And an other div on the right with a variable width and height.
And I want to give the same height to these two div.
Here it is : Code HTML / CSS
I finally found a solution.
By using some css table stuff (display:table-row, display: table-cell etc).
Something like this: Note you can replace inline style with CSS classes I just did it this way to make it easy to see what was going on.
<body>
<div id="leftnav" style="position:absolute; top:0px; left:0px; bottom:0px; width:200px;overflow:auto;">
</div>
<div id="content" style="position:absolute; top:0px; left:200px; bottom:0px; right:0px; overflow:auto;">
</div>
</body>
Here is an example you can preview http://jsbin.com/ovami4/edit
Check the example here : DEMO
Basically, give a fixed height to the "container" and make overflow:hidden. Also give that height to the "nav"
This works. You can set the height of leftnav. Rightnav can also be variable but don't forget to clear: left; before you add something after that.
<body>
<div id="leftnav" style="background-color: blue; float: left; width:200px;">
</div>
<div id="content" style="background-color: red; float: left; width: auto; position: absolute; right: 0px; left: 200px;">
</div>
</body>
