Filling all the available space horizontally and vertically, with divs

I'm trying to achieve the following layout without tables or JavaScript.

It's basically the common layout of desktop software. Some toolbars and the actual content in the middle. I'm trying to replicate the layout in a web-application.

I need all the toolbars to be flexible and optional. So in one state there might only be the top toolbar with 3 rows of icons and in another case all four toolbars with just a little content.

The application will be using 100% of the document width / height and must not overflow. However, the div in the middle has overflow: auto and should scale in every direction. There might be a case where all the toolbars are hidden and then the middle div should take the whole document.

The application requires JavaScript and do开发者_StackOverflowesn't support IE6 at all, but I'm still looking for a cross-browser way to do this with CSS.

It's very easy and clean to do it with a table and I know how to do it with JavaScript, but I have come across this problem multiple times and would like to stop using tables.

It can't be done cross browser compatible. Use jQuery javascript plugin: http://layout.jquery-dev.net/