Cross-Browser Divs vs Tables 100% Height - My Challenge to Web Developers

The Challenge

I challenge web developers to come up with a cross-browser solution that uses DIVs to reproduce my layout that uses a Table that uses 100% height with a middle area that stretches.

The Catch

1. Cross-Browser: It must work and look the same in IE6, IE9 normal mode, Chrome 11, and Firefox 4.


2. Code Amount: The Div solution should be less complex or at least no more complex than my Table solution.  (There is a link to my code at the end of this post.)


3. Feel free to use javascript and CSS, but just remember requirement 2 above.


4. Extra brownie points if you use an XHTML Transitional doctype.


5. Even more brownie points if you use an XHTML Strict or HTML 5 doctype.

User Interface Requirements

1. Top Pane: Must always be visible and never scroll out of view.


2. Middle Pane: When resizing the browser, the middle pane height' must stretch to fill the rest of what the top and bottom don't take up.


3. Bottom Pane: Must always be visible and never scroll out of view.

What It Should Look Like

1. 


2. My code that uses a table works on IE6, IE9 normal mode, Chrome 11, and Firefox 4.

My Code

1. You can look at my code here: index.html

Remember to test on IE6.

Feel free to post comments here, and even include links back to your proposed solution.

Good luck!