<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Clearing floats demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
body {margin:0px; padding:0px; font: 1.0em verdana, arial, sans-serif;}
div#header {width:450px; background-color:#CAF;}
div#contentarea {width:450px; background-color:#CCC;}
div#column1 {width:150px; background-color:#FCC; float:left;}
div#column2 {width:150px; background-color:#CFC; float:left;}
div#column3 {width:150px; background-color:#AAF; float:left;}
div#footer {width:450px; background-color:#FAC;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
</style>
</head>
<body>
<div id="header">This is the header</div>
<div id="contentarea" class="clearfix">
<div id="column1">These divs will float side by side to create columns. This is div 1 with
a little text to give it some height...</div>
<div id="column2">This is div 2 with a little more text so it's a different height than
the other two...adding a little more text here makes now this column the longest.</div>
<div id="column3">This version uses the Alsett clearing method which uses the CSS :after
psuedo-class to add content and force the container to enclose the floats, and only
requires a class to be added to the markup, instead of a "clearing" element.</div>
</div><!--end contentarea-->
<div id="footer">This is the footer</div>
</body>
</html>