Sean's New Site

    <div id="head"></div>
    <div id="subHead">Optional</div>
    <div id="containter">
        <div id="body"></div>
        <div id="nav"></div>
        &nbsp;
    </div>
    <div id="subFooter">Optional</div>
    <div id="footer"></div>

Pointers:

The 'nav' div is after the body. This is so the body text will actually come before the navigation text on the page. This gives the body text more presence to the search engine spiders, than the navigation text, thus helping the rankings of the page.
The ‘container’ div is only to fill in behind the ‘nav’ and ‘body’ div’s when they are not the same height and the background is not the same as the page.
- Div tags don’t work well with the height defined in percentages across mulitple browsers.
- If you define div's with a fixed pixel width, as your text gets taller, the text will grow outside of the div.
- Furthermore, this aproch only works when the ‘nav’ and ‘body’ div backgrounds are the same color.
Notice the   before the closing of the ‘container’ div, this causes the container to reach the bottom of the ‘nav’ or ‘body’ div which ever is the tallest
- Some text here would do the same thing.
- This is a fix for Firefox as it should work fine without it in IE.

Here is the CSS that makes it work.

    #head{height:75px;}
    This can have a heigth or just fit the contents.

    #subHead{height:30px;width:100%;}
    You don't need this div, but I like to use if for breadcrumb navigation.

    #container{background:#F2F6F8;min-height:325px;overflow:auto;}
    This is used for the background for the 'body' and the 'nav' div's.
    You don't need this if the 'body' and 'nav' backgrounds match the page.
    min-height is a good idea for the pages without a lot of content.

    #body{width:80%;float:left;margin-left:20%;}
    This is important, the width is only 80%, the margin pushes it over the other 20%.
    The float is what allows the 'body' to float on the right side of the page.

    #nav{width:20%;margin-left:-100%;float:left;}
    The nav is only 20% so it will fit the margin of the body div.
    The -100% margin and the float allow the nave to position corectly.

    #subFooter{height:30px;width:100%;}
    This is not needed it is just something I like to use.

    #footer{height:100px;}
    Like the head, this can have a height or fit the contents.

Code Sample Reference