knzai · October 9, 2010 06:02
diff --git a/one_hundred_percent.html b/one_hundred_percent.html
 <!-- 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>
	<!-- 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>