static and relative position

by fangunxs

HTML

<div id="header">Header</div>
    <div id="wrapper">
        <div id="main">Main content</div>
        <div id="sidebar">Sidebar</div>
        <div id="nav">Navigation</div>
    </div>
<div id="footer">Footer</div>

CSS

#header {
   background-color: #369;
   color: #fff;
 }
 
 #sidebar {
   background-color: #ff6;
    width: 13em;
    padding: 0 0.5em;
    float: left;
    margin-left: -14em;
    position: relative;
    left: 15em;
 }
 
 #nav {
   background-color: #ddd;
    width: 11em;
    padding: 0 0.5em;
    float: left;
    margin-left: -100%;
    position: relative;
    right: 13em;
 }
 
 #footer {
   border-top: 1px solid #369;
    clear: left;
 }

body {
   margin: 0 auto;
   min-width: 40em;
   max-width: 56em;
 }
#main{
    background-color: lime;
    float: left;
    width: 100%;
}
#wrapper {
   margin: 0 14em 0 12em;
   padding: 0 1em;
 }