Div Placement Within Docuement Flow

[cesarcesar]

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>

 

[calabiyau]

Okay it's not perfect but just tested in IE 6 and Firefox and seems the general idea is right.  Change your container div from position: absolute; to position: relative; and give it a padding-top equal to the height of your header div.  Then position the header absolutely within the empty space.  As for the columns, float the center column left and give it a margin-left equal to the width of the left column.  For IE 6 you can use a conditional comment (I used an old hack here cuz I can never remember CComment syntax) to serve a special rule about the margin-left, since IE 6 will sometimes double left margin when item is floated.  You need to give it margin-left equal to half what it should be.  Then float left column to the left.  It will sit up against the center column now, so we give it negative margin-left equal to the total width of the center column and the left column.  This pulls it across and slides it into place.  Then float the right column to the left and it should just fit in there.  I used an empty div to clear the floats for firefox so footer will sit at the bottom, as it wouldn't recognize my command in header div.  I notice your widths do not add up to the total width of container, so if you plan to have space between column elements you will have to take that into consideration in your totals.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


<style type="text/css">

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

#Container
{
position: relative;
padding-top: 245px;
z-index:1;
width: 700px;
height:auto;
margin-left: auto; margin-right: auto;
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	

{ 
float: left;
margin:0 0 0 150px; 
text-align:left; 
border:1px solid yellow; 
width:250px; 
}

*html #CenterContainer {margin: 0 0 0 75px;}





#LeftContainer		

{ 
float:left; 
margin:0 0 0 -410px; 
text-align: left; 
width: 150px; 
border:1px solid green; 

}

#RightContainer		
{ 
margin:0 0 0 0px; 
text-align: left; 
width: 150px; 
border:1px solid blue; 
float:left; 
}


#HeaderContainer	{ 
clear: left;
position: absolute; left; 0; top: 0;
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; 
}

</style>

</head>

<body>
<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 style="clear: left;"></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>

</body></html>

[cesarcesar]

calabiyau - i like what you have done here. my code example was not exact to px space, when i try to adjust your example, strange things happen.

 

First off i removed the ActionContainer, this is not really needed.

 

Im trying to move the center div to the right a little, but the left column also moves. Why is this. Thanks.

[calabiyau]

Remember the centre column is floated left so it sits to the left hand side of main container, then it is moved into position with margin-left. and then the left column is floated left, so it would sit right up against the right hand side of centre column.  Then the left column is moved, through negative margins into it's position.  It has to move through the entire width of the centre column and the entire width of the left column to slide into place. If you move center div to the right a little you have to adjust the negative margin on the left div to compensate.  It has to travel a farther distance to get to where you want it to sit now, so you need to increase the negative margin on left div, by whatever distance you move the centre div.  Does this make sense?

[bronzemonkey]

That's pretty messy, this approach is better

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Blah</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">
#wrap {float:left;}
  #column-center {float:right;}
  #column-left {float:left;}

#column-right {float:right;}

#footer {clear:both;}
</style>

<body>

<div id="container">
   <div id="header"></div>

   <div id="wrap">
      <div id="column-center"></div>
      <div id="column-left"></div>
   </div>

   <div id="column-right"></div>

   <div id="footer></div>
</div>

</body>
</html>

[dbrimlow]

Whoops, bronzemonkey, little typo, you put the close head tag too soon.

 

I actually prefer floating all left. I put borders and margins and stuff to show how you can play with this:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Blah</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<style type="text/css">
body {width:100%; margin:0; #color:#555555; background-color:#555555}
a:link, a:visited {color:#EEEEEE}
a:hover, a:active {color:#99FFCC}
#header {margin: 10px; background-color:#800000; color:#FFFFFF; text-align:center;border:2px 

#333333 solid;}

#container {margin:0 auto; width:80%}

#column-center {float:left;width:50%; border: 1px #333333 

solid;background-color:#999999;padding:5px; margin:5px}

#column-left {float:left;width:20%;border:1px #006699 

solid;color:#FFFFFF;background-color:#333333;padding:5px;margin:5px}

#column-right {float:left;width:20%;border:1px #555555 

solid;color:#FFFFFF;background-color:#333333;padding:5px;margin:5px}

#footer {display:block; width:100%; color:#000000; background-color:#FFFFFF; height:2em}
#footer a:link, #footer a:visited {color:#006699}
#footer a:hover, #footer a:active {color:#99CCFF}
#footer li {display:inline; margin:5px 80px; padding 5px}
div.clearboth {clear:both;}
</style>
</head>
<body>

<div id="container">
   <div id="header"><h3>;oijv [oij f[oij f[oijuf[ozx;klcvj</h3></div>
<div id="column-left">
<ul>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
</ul>
</div>
      
<div id="column-center">
<p>ukhfovhb</p>
<p>ukhfovhb</p>
<p>ukhfovhb</p>
</div>
      
<div id="column-right">
<p>ukhfovhb</p>
<p>ukhfovhb</p>
<p>ukhfovhb</p>
</div>

<div class="clearboth"></div>

<div id="footer">
<ul>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
</ul>
</div>
</div>

</body>
</html>

[bronzemonkey]

Whoops, bronzemonkey, little typo, you put the close head tag too soon.

 

Thanks!

 

I actually prefer floating all left.

 

But then you cannot have the central column appearing first in the source code, which is what he wanted.

 

I also don't like putting empty divs in the markup just to clear floats because it isn't semantic or a reliable way to clear floats properly. Besides, in the example code you posted, you could simply have included {clear:both} in the css for #footer (which is a block element by default too).

 

Three column layouts are a little tricky and there are many methods to achieve them. But if you want the central column appearing first in the source code you are more limited with what you can do.

 

[dbrimlow]

I also don't like putting empty divs in the markup just to clear floats because it isn't semantic or a reliable way to clear floats properly. Besides, in the example code you posted, you could simply have included {clear:both} in the css for #footer (which is a block element by default too).

 

LOL. Okay. bronzemonkey, let's get down to the REAL nitty-gritty (and this is why those of us who already "know" this stuff still refer to the newbie links we provide). We BOTH know better. And since this is pretty advanced stuff, we both opted to give the simple, old school reply rather than get into the true "monster fix". So the following is going to be somewhat confusing to the newbies - but bare with me, I will provide a link at the end. This is more a reminder to those of us who need reminding of things we've forgotten but should remember. 

 

The fact is, for true cross-browser integration, neither of our clearing solutions are optimal ... - believe it or not, EXCEPT in IE!! This is actually a case where IE does the right thing most of the time, and all Real Browsers don't. Our solutions are both 20th century CSS and each has its potential pitfall

In FF and can cause a huge headache.

 

First, let me say that I had to actually go back to the source link to remind myself of all this.

 

Solution A (using "clear:both" in the select element's css):

you could simply have included {clear:both} in the css for #footer (which is a block element by default too)

 

Problem caused in Real Browsers:

"What this does is extend the margin on the top of the cleared box, pushing it down until it "clears" the bottom of the float. In other words, the top margin on the cleared box (no matter what it may have been set to), is increased by the browser, to whatever length is necessary to keep the cleared box below the float.”

 

So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. It must appear just below that level."

 

What happens is that instead of clearing the element that is floated before it, it acts like an "absolutely positioned element" (or "layer" for those who use DreamWeaver) and sits "on top" of the previously floated element (which slides beneath it.

 

Solution B (using a separate div just to clear):

<div class="clearboth"></div>

<div id="footer">
<ul>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
<li><a href="#">ukhfovhb</a></li>
</ul>
</div>

As bronzemonkey correctly points out, putting empty divs in the markup just to clear floats isn't semantic or a reliable way to clear floats properly. And, more importantly, this clearing method is not at all intuitive, requiring an extra element be added to the markup.

 

One of the major premises of CSS is that it helps reduce the bloated HTML markup found it the average site these days. So having to re-bloat the markup just so floats can be kept within their containers is not an ideal arrangement.

 

Besides that, by "reliable", bronzemonkey means that some browsers can have trouble with certain kinds of clearing elements in some situations.

 

So, what IS the solution?

Creating a class as follows for just clearing the element you need to (in this case it would be in #footer):

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

I've used this in many sites - and even tested it in IE 5.03 Mac - but I actually forgot about it and have gotten lazy. THIS IS the best clearing solution.

 

Here is the link positioniseverything easy clearing.

 

Now that I went through all that! I'll give you the bad news. It still CAN cause a problem in certain browsers and in certain specific layout conditions ... but there is a fix in the link for those who actually get this problem.

 

Good luck. Dave

[bronzemonkey]

LOL. Well that is was I meant by clearing properly but I just added that based on the code in your earlier example, there was no point in using an empty div because the {clear:both} could just have been included in the css for #footer.

 

I don't actually use the exact method you posted above because it involves dumping class="clearfix" into the html whenever you want to clear properly. This is my preferred approach for the moment because it is all done from within the css file.

 

#element:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
/*IE6 only*/
* html #element {height:1%;}
/*IE7 only*/
*:first-child+html #element {min-height:1px;}

 

No point bothering with IE-Mac either anymore!

[cesarcesar]

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