CSS positioning - relatively exciting

Recently I developed a site with CSS positioning that will work in Visual Web Developer 2008 with the use of master pages. The site design started as a basic header and two column css site (with floats) with no footer because the footer is designed into the right column. This is how I ended up using positioning instead of floats.

I started with the container div in the master page.
Setting the css for the container div to width:800px; and margin:0 auto; to make sure it stayed in the center. I then set the body of the page to margin-top:0; so my container div sat at the very top of the page. I also set everything on the page to padding:0; margin:0; by using:
* {
    margin:0;
    padding:0;
}

From there I carved out my header div inside the container div.
I set it also to width:800px; and a height of 202px; Inside the header div I placed my logo file with margin:79px 0 19px 19px;.

After the header I developed the mainbody div inside the container div.
I set the mainbody div to 800px;. From there I setup the two column divs inside the mainbody div. The left col div to width:207px; float:left;. When completed with the left column I then created the right column css set to width:593px; float:left;. I then proceeded to place my content (navigation and such) in these areas.

This is where the problem started.
The floats were working, but the divs started to collapse inside each other and I had to decrease the width of the divs inside the columns to make them fit, which meant a lot of design changes. So I decided to go a different route.

I decided to give myself some flexibility.
I decided to use css positioning. I went back to my container div and added position:relative;. My container div now had the css properties of:
#container {
    width:800px;
    margin:0 auto;
    position:relative;
}

From there I decided to make my header positioned absolute inside my container div. So my header css now reads:
.header {
    height:202px;
    width:800px;
    position:absolute;
    top:0;
    left:0;
}
This positions the header at the top left of the container div. I left the logo in the div and had to make no changes to it.

I then proceeded to make the left column absolute also. I took out the mainbody div because it was not needed any more. My new left column div now has the css:
.leftbody {
    width:207px;
    top:202px;
    left:0;
    position:absolute;
}
This positions the left column all the way to the left of the container div and 202px from the top of the container div.

Next came the right column. The right column css was changed to:
.rightbody {
    width:603px;
    position:absolute;
    top:195px;
    left:207px;
}
This positions the right column at the exact right of the left column by positioning it left:207px;. It then positions the column at 195px from the top of the container.

Where it gets interesting is for seo purposes I was able to place the code for the right column (.rightbody) first in the source code and it will still be where I want it on the page. If you are thinking of layers however the left column will actually be placed on top of the right column, but since they are not placed over each other they won't overlap.

The layering aspect did help though because in the header section I had not placed any of the photos I will be placing. Behind the logo there is a faded color wheel and next to that there will be photos. So I was able to place the div for the color wheel at the top behind everything. Here is the css:
#colorcircle {
    position:absolute;
    left:-77px;
    top:0;
}
This positions the div actually outside of the container div to the left at 77px. What is cool is my main container div actually says 800px wide and the browser still reads the edge of the page at the left and right edge of the container.

Then comes in the rotating photo div, which will also include jquery to rotate through images. Here is the css:
#rotatingimages {
    position:absolute;
    left:270px;
    top: 0px;
}
The images are at a width of 600px but overlap the color wheel at 270px from the left of the container div. So this positions the right side of the images outside of the container div about 70px. It is also positioned above the color wheel because it is written after the color wheel in the source code.

Here is the source code broken down:
div id="container"
    div id="colorcircle"
    div id="rotatingimages"
    div class="header"
    div class="rightbody"
    div class="leftbody"
/div

Here is the css broken down:
#container {
    margin:0 auto;
    width:800px;
    position:relative;
}

#colorcircle {
    position:absolute;
    left:-77px;
    top:0;
}

#rotatingimages {
    position:absolute;
    left:270px;
    top: 0px;
}

.header {
    height:202px;
    min-height:202px;
    width:800px;
    position:absolute;
    top:0;
    left:0;
}

.rightbody {
    width:603px;
    position:absolute;
    top:195px;
    left:207px;
}

.leftbody {
    width:207px;
    top:202px;
    position:absolute;
    left:0;
}

The header div was taken out and the logo itself was css positioned to cut down on source code. Also z-index could have been used to layer items over each other and move the right column all the way to the top in the source code.

My LomoHome

Here is a glimpse into my lomohome at the new lomography.com site

http://www.lomography.com/homes/cre8ivrob

A somewhat creepy but effective billboard