Pure HTML/CSS Layout - complex
For a Forrst challenge.
by genelocklin
HTML
<div id="header">
<h3>header</h3>
</div>
<div id="nav">
<h3>nav</h3>
</div>
<div id="content-wrapper">
<div id="content">
<div id="section">
<h3>content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat gravida odio, id volutpat quam gravida ac. Aenean sapien lacus, bibendum eget luctus vel, sagittis a purus. Etiam porttitor posuere ullamcorper. Maecenas tempor, neque at consequat varius, ante enim cursus nisl, sed porta felis lacus id enim. Sed id massa ut magna tincidunt mattis quis id sapien. Suspendisse potenti. Sed in imperdiet quam. Ut euismod, dui eu vestibulum malesuada, nulla nunc accumsan augue, eget tempor justo velit nec mi. Nam et elit elit. Ut justo nisi, interdum sit amet vehicula quis, laoreet nec metus. Praesent ac libero sed risus posuere semper. Maecenas varius iaculis tortor eget porttitor. Maecenas viverra turpis eget purus tristique vehicula. Aliquam erat volutpat.</p>
</div>
</div>
<div id="aside">
<h3>sidebar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat gravida odio, id volutpat quam gravida ac. Aenean sapien lacus, bibendum eget luctus vel, sagittis a purus. Etiam porttitor posuere ullamcorper. Maecenas tempor, neque at consequat varius, ante enim cursus nisl, sed porta felis lacus id enim. Sed id massa ut magna tincidunt mattis quis id sapien. Suspendisse potenti. Sed in imperdiet quam.</p>
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
CSS
body {
margin: 0 auto;
max-width: 960px;
padding: 0;
width: 80%;
min-width: 600px;}
#header {
background: grey;
height: 100px;
margin-bottom: 10px;
width: 100%;
}
#nav {
background: grey;
height: 50px;
margin-bottom: 10px;
width: 100%;
}
#content-wrapper {
background: grey;
overflow: hidden;
margin-bottom: 10px;
}
#content {
float: left;
margin-right: -300px;
width: 100%;
}
#section {
border-right: 300px solid green;
padding-bottom: 20px;
}
#aside {
background: green;
float: right;
padding-bottom: 20px;
width: 300px;
}
#footer{
background: grey;
height: 100px;
width: 100%;
}
h3 {
font-weight: bold;
line-height: 40px;
margin-left: 20px;
}
p {
margin: 0 20px;
}
JavaScript
;