The new css 100% width and height with header and sidebar

It's been a while since I've had to deal with making a cross-browser 100% height layout - long enough that a couple version of IE have come out since.  CSS support in IE has come a long way, so I thought I'd start fresh and try a purely standards based approach for the latest IE and standards based browsers, using the 'display: table-*' styles, and just do a fallback for older versions of IE (a 100% height modified Holy Grail layout that relies on the IE quirks box-model).

Unfortunately, while IE8 does support the table display styles, IE7 doesn't, and there doesn't seem to be any way to put IE7 in quirks mode, while keeping IE8 and every other browser in standards mode.  So I just settled on the old-fashioned approach of having one layout for all other browsers and keeping the IEs clumped together in quirks mode.

(download)

Filed under  //   browsers   css   tech   webdevelopment  

Comments (1)

Oct 11, 2010
Tim Connor said...
As an alternative to using quirks mode which will have some potentially negative side-effects (like a jquery performance hit), you could use a IE css expression in your IE only stylesheet to fix the height. Of course, then you are 3/4 of the way back to just doing it all that way (js with an onload event for all browsers.

Leave a comment...