CSS Layout without Table Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

Box 1

Box 2

Box 3


Code:
<div id=\"wrapper\">
<div id=\"header\">Header</div>
<div id=\"content-box1\"><p>Box 1</p></div>
<div id=\"content-box2\"><p>Box 2</p></div>
<div id=\"content-box3\"><p>Box 3</p></div>
<div id=\"content\">
<div id=\"content-left\"></div>
<div id=\"content-main\"></div>
</div>
<div id=\"footer\"></div>
<div id=\"bottom\"></div>
</div>
CSS:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
height:300px;
}
#content-main {
margin-left:10px;
width:666px;
height:150px;
}
#content-box1, #content-box2, #content-box3 {
padding:10px;
border:1px solid #bbb;
position:absolute;
margin-top:190px;
height:120px;
}

#content-box1 {
margin-left:212px;
width:200px;
}
#content-box2 {
margin-left:444px;
width:200px;
}
#content-box3 {
margin-left:676px;
width:202px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}