Posts

Showing posts from April, 2011

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

Image
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 view.

What It Should Look Like


My code that u…