Extremely hard html/css problem!!!

Im trying to design a html page for a program im making (an ajax powered file manager). Two parts to this, the first one is not a bother, but the second part is what causes problems. In this page there are no scroll bars at the side and the bottom. The only scroll bars are in the content area specified below.

Easy part
In the page I want an overall top bar (height 40px) two side bars each side (250px wide) and a central space that will adjust depending on the width of the browser. The height of the two sidebars must be 100% - the height of the top bar. Visually this amounts to the following:



Which is fine using tables with height: 100%, or other ways.


Very (very) hard part
Problems now arise with the central section. What I want here is two bars, the full width of the central section, and heights 40px and 80px respectivly. The rest of the central section then adjusts, again depending on the broiwser width and heights.

However, this bottom piece ("content area") is where the list of files will go. Thus, if the folder contains 100 files, a scroll bar must show up (overflow: auto), as seen below.



The problem is setting the content area's height. If no height is set the overflow property ceases to operatate, and the scoll bars wont appear. However a height cannot be designated because the content area must be as big the browser window minus the various bars to the top and sides. And using something like height: 90% wont work as all the other values for the other elements are in pixils.

Ive tried using tables, but they wont take overflow property.

Ive tried using divs, but the heights wont work.

Ive tried combinations, but the div refuse to take percentil heights based on their table containers.

Anyone any ideas???? I hope I have made myself clear!