Hello,

My page when correct should show the HeaderContainer, blow that the ActionContainer which has, 3 column divs, then below that the FooterContainer.

It is important that the page build starts with the CenterContainer, then the LeftContainer, then RightContainer.

My issue is that the LeftContainer and RightContainer columns both are aligning to the bottom of each other, and to the bottom of the CenterContainer column. I think this could be an issue with floats. What do you think?

See online demo, http://tlcgiftsandbaskets.com/demo/p...sition_css.php

body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}

#Container{
position: absolute;
z-index:1;
width: 700px;
height:auto;
left: 50%;
margin-left: -350px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}

#ActionContainer    { margin:0 0 0 0; text-align:left; border:1px solid orange; }
#CenterContainer    { margin:0 0 0 175px; text-align:left; border:1px solid yellow; width:250px; }
#LeftContainer        { margin:0 0 0 10px; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer        { margin:0 0 0 450px; text-align: left; width: 150px; border:1px solid blue; float:right; }
#HeaderContainer    { margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer    { margin:0 0 20px 0; padding:0 0 30px 0; border:1px solid blue; display:block; }

<div id="Container">

    <div id="ActionContainer">

        <div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div>

        <div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div>

        <div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div>

    </div>

    <div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div>

    <div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div>

</div>

Why does the center container have to come first in the document?
I changed a few things and think I have what you are trying to achieve. It looks like you are mixing up absolute positioning and margins and making it more difficult than it should be. Here is what I came up with:

HTML

<div id="Container">

    <div id="ActionContainer">
    
    <div id="HeaderContainer">HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.</div>

        <div id="LeftContainer">LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer, LeftContainer.</div>

        <div id="CenterContainer">CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer, CenterContainer.</div>

        <div id="RightContainer">RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer, RightContainer.</div>

    </div>

    

    <div id="FooterContainer">FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, FooterContainer, </div>

</div>

CSS:

body{
margin: 0pt; margin:0 15px 0 0;
text-align: center;
}

#Container{
margin:0 auto;
width: 700px;
border-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: #ccbbaa;
background-color: #ffffff;
text-align:left;
}

#ActionContainer    { margin:0; text-align:left; border:1px solid orange; }
#CenterContainer    { margin:0; text-align:left; border:1px solid yellow; width:250px; float:left; }
#LeftContainer        { margin:0; text-align: left; width: 150px; border:1px solid green; float:left; }
#RightContainer        { margin:0; text-align: left; width: 150px; border:1px solid blue; float:left; }
#HeaderContainer    { margin:0 0 0 0; width: 700px; height: 245px; border:1px solid red; }
#FooterContainer    { clear:left; margin:0; padding:0 0 30px 0; border:1px solid blue; width:700px; }

The center DIV comes first for optimal SEO

Why would putting your center column first in your html affect your SEO?

That's my question too. The location in the code has no affect on the search engines, you either have good content there or you don't.

You might want to take a look at this article on source-ordered columns:
http://www.positioniseverything.net/ordered-floats.html

The center DIV comes first for optimal SEO

Makes no difference whatsoever.

Originally Posted by chrishirst

Makes no difference whatsoever.

My SEO research has shown that having your body content the closed to HEAD tag as possible gains points. Why not do this then? Anything helps right? Search is not just about good content, placement pays as well.

thanks again to Deathshodow, I'm going with his fix at http://forums.digitalpoint.com/showt...50#post5024150.

This question did spawn some other great solutions and links to important content.

http://blog.html.it/layoutgala/
http://jlhaslip.trap17.com/samples/t...lex/index.html
http://www.positioniseverything.net/ordered-floats.html
http://www.dhtmlgoodies.com/forum/vi...hp?p=9890#9890
http://www.phpfreaks.com/forums/inde...,165749.0.html

Originally Posted by empiresolutions

My SEO research has shown that having your body content the closed to HEAD tag as possible gains points. Why not do this then? Anything helps right? Search is not just about good content, placement pays as well.

And how did you test this myth?

did you reposition the content and see the conversions go up?

then put it back to normal and see them drop?

repeated at least 3 times with the same results.

Originally Posted by chrishirst

And how did you test this myth?

I have only read about this approach on a few different sites. This is my first CSS only site and I'm trying it out. Will it work... seems logical enough to want to have your main content as first as possible.

I will be doing bench test similar to your suggestion and I will post my results in a few weeks.

It looks like deathshadow said something similar to what we were saying here. He advised against going outside the document flow with absolute positioning, but showed how to do absolute positioning.

I still can't understand how having the content div first makes a difference.

Anyway, glad you found a solution!

thanks for your help too Angele803

I have only read about this approach on a few different sites

Don't believe ANYTHING you read about SEO until you can demonstrate it

the vast majority of self styled SEO "experts" don't have a clue and are simply regurgitating second and third hand heresay.

since we really don't know the algorithm.. testing is the only fail safe approach. I plan to test a bunch. thanks for the advice.