WEB STANDARDS CREATIVITY

36
Positioning elements
While we're not trying to accomplish anything groundbreaking with the overall layout, it's worth reviewing how each major
element is positioned before we move on to the nitty-gritty. First, clear the floats:
.clearfix:after
{content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
.clearfix {display:block;}
/* End hide from IE-mac */"
body {
background:#111 url(../i/bg_body.gif) repeat-x;
margin:0;padding:0;
font-family:'lucida grande',tahoma,sans-serif;
font-size:small;
}
#wrapper {
width:800px;
}
#content is set to float:left, causing it to enclose the two floats it contains (#content-primary and #sidebar-wrapper):
#content {
float:left;
}
#content-primary is also set to position:relative, allowing #sidebar-tab and #teaser to be positioned absolutely, but
within the confines of their containing element. See Doug Bowman’s “Making Absolute Relative” (http://stopdesign.com/
articles/absolute/) for a good overview of this technique.
#content-primary {
float:left;
background:url(../p/homepage_photo.jpg) no-repeat;
position:relative;
height:549px;
width:520px;
padding:0;
color:#fff;
}
h1#logo {
position:absolute;