<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>