Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- keep IE in quirks mode -->
- <!DOCTYPE html>
- <html>
- <head>
- <!-- This following meta tag does no good since there is no way to trigger quirks
- mode only in IE7. The problems with an xml prolog that triggered quirks mode were
- fixed in IE7, but this meta tag was not yet introduced, so the only thing you can do
- is trigger IE-wide quirks via the comment before the DOCTYPE //-->
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
- <style type="text/css">
- /*You still need an unbroken chain of 100% from the viewport down to the 'table'
- container*/
- html, body, #wrapper { margin: 0px; padding: 0px; height:100%; }
- /* This is the heart of the new layout. You don't even need to worry about
- min-height vs. height issues, because table handle those fine without weird issues
- when the browser window becomes smaller than the content.*/
- #wrapper { display: table; width: 100%; }
- #header { display: table-row; height: 99px; }
- #logo { display: table-cell; }
- #header_contents { display: table-cell; }
- #container { display: table-row; }
- /* This is the one min-X needed, it prevents the sidebar from collapsing down to
- it's contents width when the containing div tries to shrink due to the window being
- shrunk down*/
- #sidebar { display: table-cell; width: 200px;
- min-width: 200px; vertical-align: top;}
- #content { display: table-cell; }
- /* Fluff, purely for illustration of the containers */
- .box { width: 100px; height: 100px; background: grey; }
- #content .box { width: 300px; }
- #header_contents { border: 2px solid green; background-color: #cfc; }
- #sidebar { border: 1px solid blue; background-color: #ccf; }
- #content { border: 2px solid red; background-color: #fcc; }
- </style>
- <!-- The quirks mode based IE approach below. Since in that box model paddings and
- margins are not additive with the contents width/height, you can just add some
- paddings to the parent. For an explanation of the sidebar negative margin tricks,
- google 'holy grail css.' And the header is just absolutely positioned over the space
- created by the padding trick on the container //-->
- <!--[if IE]>
- <style type="text/css">
- #wrapper, #logo, #header, #container, #sidebar, #content { display: block }
- #header { position: absolute; padding-left: 200px; }
- #logo { float:left; height:100%; width:200px; margin-left: -200px; }
- #header_contents { height: 100%; width:100%; float:left;}
- #sidebar { float: left; height: 100%; margin-left: -200px; }
- #container { height: 100%; padding-top: 99px; padding-left: 200px; }
- #content { height: 100%; width: 100%; float: left; }
- </style>
- <![endif]-->
- </head>
- <body>
- <div id="wrapper">
- <div id="header">
- <div id="logo">Logo</div><div id="header_contents">Header</div>
- </div>
- <div id="container">
- <div id="sidebar"><div class="box">Sidebar</div></div>
- <div id="content">
- <div class="box"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment