In web design, one of my favorite CSS propriety is float. Here I’ll demonstrate how to use it to built a page header. In this simple example I float every section left.

body
{
    padding: 0px;
    font-family: Century Gothic, Tahoma, Sans-Serif;
    font-size: small;
}
.ContentPlaceHolder
{
    /* this is to center the content in the browser page*/
    margin: 0 auto;
    width: 800px;

    border: solid 1px gray;
    height: 100%;
}
.PageHead
{
    width: 800px;
    height: 100px;
}
.PageBody
{
    width: 800px;
    height: 600px;
}
.FloatingLayer
{
    float: left;
    width: 266px;
}

<div class="ContentPlaceHolder">
    <div class="PageHead">
        <div class="FloatingLayer">
            <img src="http://weblog.simondeshaies.com/sample/support.png" alt="Support Logo" /></div>
        <div class="FloatingLayer" style="text-align: center;">
            <h1>
                My Web Site!</h1>
        </div>
        <div class="FloatingLayer" style="text-align: right;">
            <a href="#">My Link</a></div>
    </div>
    <div class="PageBody">
        My Content Here</div>
</div>