Everything Falls Apart - Pro CSS Techniques - page 310

<div class="float-wrapper">
<div class="first-col">
<p><strong>First Column</strong></p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="second-col">
<p><strong>Second Column</strong></p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="third-col">
<p><strong>Third Column</strong></p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div id="footer">
<p class="first-para">First paragraph</p>
<p class="second-para">Second paragraph</p>
</div>
Our CSS sets some defaults, styles the ul elements as a horizontal navbar (and positions it
at the bottom of the header using position:absolute ), positions the columns with floats and
margins, and makes sure our footer clears the floated columns above:
body {
padding:.5em;
color:#333;
font-family:'lucida grande', sans-serif;
}
p {
padding:.5em;
}
#header {
margin:0 0 .5em;
padding:.5em;
background-color:#eee;
border-bottom:1px solid #999;
position:relative;
}