Absolute Two Column and Relative CSS Layout Madness - Content first

Goal: A CSS two column layout with main content in the flow first followed by left nav (see example code). This is probably easier than I think but I could not find any clear cut example here or online. The left nav has to have a fixed width.

I would like to position the left nav and main content areas as you would expect (left nav then main content). This is for SEO purposes to place the content as high up in the flow as possible then position it appropriately. I need to have this work in IE6 as well. The main content area needs to expand with the browser window. With my current version the left nav is absolute positioned and overlaps the main content container. Thanks in advance for all you CSS gurus!!! Hopefully this can be of use to others as well.

<style>
.clearly {clear: both; font-size: 1px;}
.contentContainer {border:1px solid; width:800px;}
.leftNav {width:200px;background-color:#CCC;position:absolute;}
.mainContent { position:relative;left:200px;width:100%;float:left;background-color:#A6C9FF;}
</style>

<div class="contentContainer">    
<开发者_如何学Cdiv class="mainContent">
Relative Main Content - Width 100%
</div>

<div class="leftNav">    
Absolute Left Nav<br />
Absolute Left Nav<br />
Absolute Left Nav<br />
</div>    
<div class="clearly"> </div>
</div>

Drop the containing div.

html, body { width: 100%; height: 100%; overflow: hidden; margin:0; padding: 0; }
.mainContent
{
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}
.leftNav{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
}

http://jsfiddle.net/hFAaZ/

P.S. this has an advantage over the other answer in that any backgrounds applied to either nav or content areas will always fill the page. This is usually what is expected from the designer.

Edit

Just noticed that you need a fixed width on the container. Add .container to the html,body list above, then also add another rule to ste it's width to 100%;

Is this what you are after:

http://jsfiddle.net/Mutant_Tractor/8uws6/

Simple semi-fluid + fixed layout:

Fluid column:

padding-left: 170px;

Fixed:

width:150px;
float:left;
background:red;
position:absolute;