...

View Full Version : Div Placement Within Docuement Flow



cesarcesar
10-31-2007, 12:39 AM
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/positioning/position_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>

timgolding
10-31-2007, 01:10 AM
I don't see the point of the position:absolute, but you could try using a combination of clear, float and margin to achieve most effects

cesarcesar
10-31-2007, 01:14 AM
i don't thing my use of absolute to start the container is the case. I too believe it is a "clear, float and margin" issue. Whats the solution?

timgolding
10-31-2007, 01:14 AM
Actually I kind of like your layout from an SEO perspective. So the idea is you want to have your page with that structure for the HTML? Then have a header at the top and and a footer at the bottom? then the rest in between from left to right>?

timgolding
10-31-2007, 01:57 AM
Like this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#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-top:245px;
width:700px;
}

#header
{
position:absolute;
top:0;
width:700px;
heigth:245px;
}

#CenterContainer
{
left:150px;
right:150px;
position:absolute;
background-color:#FF9966;
}

#LeftContainer
{
float:left;
clear:none;
background-color:#00CC99;
width:150px;
}

#RightContainer
{
float:right;
clear:none;
background-color:#CCFFB9;
width:150px;

}

#FooterContainer
{
height:200px;
}
</style>
</head>
<body>
<div id="Container">
<div id="ActionContainer">
<div id="CenterContainer">
<p>sadsad</p>
<p>dsadasd</p>
<p>sdasd</p>
<p>&nbsp;</p>
</div>
<div id="LeftContainer">
<p>sdasdsdaasd</p>
<p>asdas</p>
<p>dasd</p>
<p>&nbsp;</p>
</div>
<div id="RightContainer">
<p>sdasdasd</p>
<p>sadasdasd</p>
<p>asdasdassd</p>
<p>&nbsp;</p>
</div>
</div>
<div id="HeaderContainer"></div>
<div id="FooterContainer"></div>
</div>
</body>
</html>

jlhaslip
10-31-2007, 06:40 AM
http://jlhaslip.trap17.com/samples/templates/3_col_flex/index.html

In my experience, the concept of requiring the content to be the first thing in the source code is not all it is cracked up to be.
I have pages with the header and menu first in the Source code which show very well in Google, yahoo, and MSN searches. Search rank varies a little, but always on the top half of the first page.
Bots search deeper on a page than the first couple of divs, subject to the content on the page, which raises the following point: Content is KING!
All the SEO tricks in the world can be defeated with good, solid content. Period.

cesarcesar
11-14-2007, 09:21 AM
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.

cesarcesar
11-14-2007, 09:29 AM
thanks again to Deathshodow, I'm going with his fix at http://forums.digitalpoint.com/showthread.php?p=5024150#post5024150.

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

http://blog.html.it/layoutgala/
http://jlhaslip.trap17.com/samples/templates/3_col_flex/index.html
http://www.positioniseverything.net/ordered-floats.html
http://www.dhtmlgoodies.com/forum/viewtopic.php?p=9890#9890
http://www.phpfreaks.com/forums/index.php/topic,165749.0.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum