Getting a DIV to affect its previous element height? - css

Question

I currently have something like the following:
Basically it's just three divs contained in one container_div which has its width and height specified. CSS code for the container and the top div looks like:
.container_div{
width: 800px;
height: 500px;
}
.top_div{
width:100%;
height:100px;
}
What I am now trying to do is come up with CSS code for the center_div and bottom_div elements in a way that:
Bottom div has no overflow
Bottom div can grow/shrink without causing its parent element to change its size ( something like bottom:0 absolute positioning )
Whenever bottom div grows, center div shrinks and vice-versa.
This is what should happen when bottom div grows:
I am looking for a pure CSS solution. Firefox support is enough.

Answer 1

This can be easily achieved by a css table layout. In your case, involving table rows, that will (by default) automatically fill the space of it's display: table container.
In your case, just set:
The top div to be a fixed height
The middle div to be 100% height. This will squize the bottom div to its own content height.
The bottom div to be zero height.
body { margin: 0; }
#container {
display: table;
position: absolute;
height: 100%;
width: 100%;
color: white;
}
#container > div:nth-child(1) {
display: table-row;
height: 50px;
background: red;
}
#container > div:nth-child(2) {
display: table-row;
height: 100%;
background: green;
}
#container > div:nth-child(3) {
display: table-row;
height: 0;
background: blue;
}
<div id="container">
<div>div 1 (fixed 100px)</div>
<div>div 2 (expand to fill remaining space) </div>
<div>
div 3 (fit its own content)
loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet...
</div>
</div>