What I am trying to do is to have a div 100px high and as wide as the window, and below that have two other touching divs, one 220px wide and as high as the window, and the other as wide and high as the remaining portion of the window.

Pixels and percentages are not playing nicely together. Any other suggestions?

Here's the code:


<div style="position:absolute; top:0px; left:0px; height:100px; width:100%; background-color:#000000; z-index:2; overflow:hidden; border-style:ridge; border-color:#FFFFFF">
</div>
<div style="position:absolute; top:100px; left:0px; width:100%; height:100%; background-color:#FFFFFF; z-index:2; overflow:scroll; border-style:ridge; border-color:#FFFFFF">
</div>
<div style="position:absolute; top:100px; left:220px; height:100%; width:100%; background-color:#DDDDDD; z-index:2; overflow:scroll; border-style:ridge; border-color:#FFFFFF">
</div>


Thanks in advance,

Hamp