Cross-Browser Divs vs Tables 100% Height - My Challenge to Web Developers
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.
- Cross-Browser: It must work and look the same in IE6, IE9 normal mode, Chrome 11, and Firefox 4.
- 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.)
- Extra brownie points if you use an XHTML Transitional doctype.
- Even more brownie points if you use an XHTML Strict or HTML 5 doctype.
User Interface Requirements
- Top Pane: Must always be visible and never scroll out of view.
- 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.
- Bottom Pane: Must always be visible and never scroll out of view.
What It Should Look Like
- 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.