<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Float-Clear Demo</title>
<style type="text/css" media="all">
html, body {height:100%; margin:0; padding:0;}
#top {position:relative; float:right; width:100%; text-align:center;}
#floater {height:50%; margin-bottom:-150px; position:relative;}
#content {clear:both; height:300px; position:relative; margin:0 auto; background-color:#FFCC66; width:70%; padding:20px;}
.after {text-align:right; padding-right:20px; font-size:0.75em;}
</style>
</head>
<body>
<div id="top">
<h1>Float-Clear Vertical Centering</h1>
</div>
<div id="floater">
</div>
<div id="content">
<h2>Centred Content</h2>
<p>When you shrink the window, a scrollbar will appear, and this box will not cover the title, which is also floated.</p>
<p>Note: I'm Australian, that’s why centre is spelt with ‘re’, not ‘er’. Don’t get confused when css'ing: centre must be spelt ‘cent<strong>er</strong>’</p>
</div>
<p class="after">Because the box is <code>position:relative</code>, normal content can follow it.</p>
<p class="after">By <a href="http://douglasheriot.com">Douglas Heriot</a> for <a href="http://nettuts.com">NetTuts</a></p>
</body>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4512877-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</html>