Make a div for all available vertical spaces?

Question

I am trying to make a layout that looks like this:

Both the upper and lower parts have a certain height, however I want the two left / right sections in the middle to occupy all available vertical spaces. Here is what I got so far.

http://jsfiddle.net/xTh5f/2/

I made the middle sections exact 500px as a showcase, but as you can see, I also messed up the middle right section and the lower right section.

Answer 1

You are talking about something like this:

Full screen (source linked below)

html, body { height: 100%; width: 100%; padding: 0; margin: 0;; color: white; } #wrapper { display: table; width: 100%; height: 100%; } #wrapper > div { display: table-row; } #wrapper > div > div { display: table-cell; } #top, #bottom { height: 50px; } #wrapper > div > #topleft, #wrapper > div > #middleleft, #wrapper > div > #bottomleft { width: 300px; } #wrapper > div > #middleleft { background: #23A9E0; } #wrapper > div > #middleright { background: #39E023; } #wrapper > div > #topright, #wrapper > div > #bottomright { background: #208D11; } #wrapper > div > #topleft, #wrapper > div > #bottomleft { background: #092A7C; } 

http://jsfiddle.net/xTh5f/4/

Answer 2

Here you will find: http://jsfiddle.net/xTh5f/3/

My changes:

html, body, #wrapper, #middle, #middleleft, #middleright set to 'height: 100%'

Next, #middleleft is given 'float: left' and #middleright 'overflow; hidden ";

See: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/