3 Div Rows - 2 Fixed, One Fluid

[Johnex]

Hi guys.
I am having some issues trying to get 3 div rows to fill out another parent container. I want the top row to have a fixed size, as well as the bottom row. The middle row should take up all the remaining space that the parent container can supply. This is what i have come up with so far:



<div style="width: 22px; height: 600px; float: left;">
<div style="width: 17px; height: 17px; background-color: #000000;"></div>
<div style="width: 17px; height: 100%; background-color: #999999;"></div>
<div style="width: 17px; height: 22px; background-color: #000000;"></div>
</div>
<div style="width: 22px; height: 600px; background: #000000; float: left;">
</div>


I attached an image bellow showing what that does. As you can see, the left div is the one that i tried to play with, the right one is to see how big a height of 600px is. For some reason, the middle div is taking the full 600px, causing the other two divs, the fixed ones, to overflow. Is there any way that i can fix this?

Thanks in Advance.

[Veronica]

When you set the height to 100&#37; for a div, the height will be 100% of the containing div. That's why your middle div is taking the full 600px.

Since your containing div has a set height of 600 px, why not just make the middle div have a set height of 561px (600 - 22 - 17)

[Johnex]

Thanks for the reply.
The problem is that the middle row needs to be fluid, since the parent container is will have varying heights. That is why i cant have fixed heights for it.

[Johnex]

cant anyone help?