<html>
<body>
<style>
body {
margin: 0em;
}
div#quickbar {
background: #f00000;
width: 100%;
}
div#nav {
background: #8f0000;
width: 12%;
/* cross browser min-height */
min-height: 20em;
height: auto !important;
height: 20em;
/* end */
float: left;
margin-top: 1em;
}
div#page {
float: left;
width: 88%;
}
div#header {
background: #00f000;
margin-left: 1em;
width: 100%;
}
div#header h1 {
float: left;
width: 60%;
margin: 0em;
background: #acacac;
}
div#header div#topactions {
float: right;
width: 40%;
margin-top: 0.5em;
background: #5c5c5c;
}
div#page-navigation {
background: #8f0000;
margin-left: 0;
margin-right: 0;
}
div#body {
background: #0000f0;
/* cross browser min-height */
min-height: 30em;
height: auto !important;
height: 30em;
/* end */
margin-left: 1em;
margin-top: 1em;
width: 100%
}
div#footer {
background: #00008f;
float: right;
width: 20em;
margin-top: 1em;
}
</style>
<!-- Layout -->
<div id="quickbar">quickbar</div>
<div class="clear: both;"></div>
<div id="nav">
<ul>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
<li>nav1</li>
</ul>
</div>
<div id="page">
<div id="header">
<h1>title</h1>
<div id="topactions">topactions</div>
<div style="clear: both;"></div>
</div>
<div id="page-navigation">page-navigation</div>
<div id="body">body</div>
</div>
<div style="clear: both;"></div>
<div id="footer">footer</div>
</body>
</html>