Q:

CSS dynamic height, scroll overflow, 2 fixed height divs above and below

I'm aiming for exactly this layout: http://jsfiddle.net/rQVmK/
... but with the addition of another fixed-height div above "Top" and another below "Bottom". The content container should grow/shrink in height as the window is vertically resized. Scrollbar is presented on overflow of content. An illustration (sorry, I'm unable to directly embed images as a new user):
http://i47.tinypic.com/s2bsic.gif
If possible, I'd like to achieve this with css only. A jQuery solution is undesirable, but it's an acceptable compromise if impossible with only css.

A:

The easiest solution for you might be to split the top and bottom container in two horizontal parts:
<div id="div3">
    <div id="subfooter" style="height:15px;width:100%">Sub Footer</div>
    <div id="footer" style="height:15px;width:100%">Footer</div>
</div>

You have to edit this to your needs, but I think it's enough to give you an idea.

