Div Placement Within Docuement Flow

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; }

Code (markup):

<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>

Code (markup):

 

http://blog.html.it/layoutgala/

The link above has lots of "content first layouts" that mostly use negative margins and floats that you could adapt. I would ditch that centering method that uses absolute positioning and use auto margins instead...

 

Well, let's see...

There is no reason to put title on STYLE...

The header should probably come BEFORE the content, even in content first SEO to preserve document structure - and being a header, that should be a header tag.

You declare margins twice on body.

There is NO reason for the outermost container to be absolute positioned... and height:auto is the default, you don't have to say it.

They are DIV's, of COURSE they are containers, stating that in the class is a waste of code.

The footer is a DIV - DIV's are display block by definition.

UNIFORM formatting of your CSS would go a long ways towards actually maintaining the page.

I think THIS is what you want -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Layout </title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}	

body {
	text-align:center;
}

#container {
	width:700px;
	margin:0 auto;
	text-align:left;
	border:1px solid #CBA;
	background:#FFF;
}

#contentWrapper {
	width:100%;
	float:left;
}

#content {
	margin:0 152px;
	border:1px solid #FF0;
}

#firstSideBar {
	width:150px;
	float:left;
	margin-right:-152px;
	position:relative;
	left:-100%;
	border:1px solid #0F0;
}

#secondSideBar {
	width:150px;
	float:left;
	margin-left:-152px;
	border:1px solid #F00;
}

#footer {
	clear:both; 
	border:1px solid blue;
}

</style>
</head>

<BODY>

<div id="container">

	<h1>
		HeaderContainer, HeaderContainer, HeaderContainer, HeaderContainer.
	</h1>

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

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

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

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

</div>

</body></html>

Code (markup):

(I trimmed the content slightly)

Which uses the same formatting I explain here:
http://battletech.hopto.org/html_tutorials/3coldiv/template.html

 

deathshadow - thank you for your code it works great. now there is one thing though, the HeaderContainer has mostly top navigation and images. The H1 tag starts immediately at the beginning of the center div. This is why i want the CenterContainer to be first. This is all done for SEO reasons and must be layed out as i detailed. Thanks again though, your code is very close.

 

Then your SEO is flawed - the H1 should, IMHO and experience, what page you are on... If it's going to be a graphic you use a image replacement technique over the site title text, and I'd include the sub-page text there... The content area should have all of it's headers dropped in priority by one.

Your order, SEO or not should preserve what a normal document flow should be... you have a header for the whole site, that's your h1 - the h2 immediately following should be your 'primary' content header.

Though if you do want it on your content area, just be sure you only use it once.

If you REALLY want to reverse the order (which I HIGHLY recommend against from a flow point of view) you could fix the height of the header, pad the top of #container, and absolute position it.

In either case there's no reason to waste a container around the header - you can style a H1 directly, if you use a div instead for the logo/header content you can style it directly, if you add a menu you can style it's UL directly.

 

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