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 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.) Feel free to use javascript and CSS, but just remember requirement 2 above. 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 v