Hello all. Lets see if i can explain this. I will start from the inside out. div.Data holds dynamic copy. It lives and is incorrectly spilling out the bottom of div.SiteContainer. Why is this? Shouldn't the container div stretch to fit the data within it? I know that by removing the position:absolute; in div.Data it works but i need to position the div. Another issue is that div.PageFooter is incorrectly positioning. I want it directly below div.Data inside of div.SiteContainer. You can find the example here, http://www.tlcgiftsandbaskets.com/demo/position.htm. This code is stripped from the home page of the URL if you want the whole thing. <style type="text/css" title=""> body{ margin:0px; text-align: center; } div.SiteContainer{ /* centers to the page.*/ position: absolute; z-index:1; width: 960px; left: 50%; margin-left: -480px; border: 1px solid green; } div.Data{ position: absolute; z-index:2; width: 600px; top:100px; left:100px; border:1px solid yellow; } div.PageFooter{ border:1px solid red; width:600px; } </style> Code (markup): <div class="SiteContainer"> <div class="Data"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> </div> <p> <div class="PageFooter" style="">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</div> </div> Code (markup):
Internet Explorer 6 does sometimes I think. But no, it shouldn't. Now when you set a width in pixels, that width stays. Text which is too big will word-wrap like in a computer word processing document, and the box (normally) grows longer, not wider. This is usually what people want anyway as many pages have columns side by side, with set widths, and they of course wouldn't want their columns stretching into other columns. I also noticed how you tried to center the divs. Text-align: center worked for IE5.5. For everyone else, use margin: 0 auto. The 0 refers to the top and bottom margins. The auto means that, so long as you have set a width for the thing you're centering, the space on each side is automagically equal. The technique you used for the absolutely positioned boxes with left:50% and then negative margin of half the width also works well, if you plan on keeping the boxes absolutely positioned. But it sounds like you want to change that? Now if you meant the container div should stretch DOWN to contain the inner div... it would if the two weren't absolutely positioned. See your footer? Why is it sitting at the top? Because the footer can't see the other two divs because when they're absolutely positioned, they're not part of the flow. The boxes cannot react to each other. What you do is have the container box relatively positioned with margin: 0 auto to center. Put the other div inside it. Give both the width you want butset height to auto. As content makes inner div grow, outer div should also (but I'm fuzzy on how this might work in IE6 with the haslayout thing). <div class="SiteContainer"> <div class="Data"> <p>Stuff.</p> </div> </div> <div class="footer"> footer footer footer </div> css * { margin: 0; padding:0; } body { whatever, background colour... } .SiteContainer { margin: 0 auto; width: 960px; height: auto; padding-top: 100px; padding-left: 100px; border: 1px solid green; } .Data { width: 600px; border: 1px solid yellow; } .footer { margin: 0 auto; width: 600px; border: 1px solid red; }
Well... first off you are using absolute positioning which removes all elements from flow - so all heights have to be declared explicitly and the layout cannot automatically grow. Second, you are using absolute positioning which removes all elements from flow - so all heights have to be declared explicitly and the layout cannot automatically grow. Now I realize that is only one thing, but it's such a collossal one thing I felt it needed to be said twice. This is an excellent example of why you do NOT absolute position content elements. I would also axe the double line breaks to format the paragraphs properly as PARAGRAPHS, reset the margins on elements, etc, etc. I THINK this is what you are trying to do - but without all the page elements I can't be sure. This is why I write out ALL the page elements in the general order they would appear on the page, THEN start worrying about using CSS to move stuff around. <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Template</title> <style type="text/css"> * { margin:0; padding:0; } body { text-align:center; } #container { width:960px; margin:0 auto; text-align:left; border:1px solid #0F0; } .data { width:600px; margin:100px 0 0 100px; border:1px solid #FF0; } #footer { border:1px solid #F00; width:600px; } </style> </head><body> <div id="container"> <div class="data"> <p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </p><p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </p><p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </p><p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </p> </div> <div id="footer"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. </div> </div> </body></html> Code (markup): Mind you, once you have your columns, and a menu, and a header all those margins would likely have to come out. Remember, you should be using flow and floats to position content elements, NOT absolute positioning. Absolute positioning is best reserved for non-content elements inside elements that have flow. (see image replacement techniques) - using it on 'content' or even 'navigation' is usually a bad idea. oop, Stomme beat me to the punch.
thanks for the suggestion. i see that you have div.Data positioned by padding within div.SiteContainer. What about if there are 20 items positioned within div.SiteContainer as i have.
deathshadow - i understand. i have some re-working to do. Can you offer any resource links to clarify floats and flow?
Well, the padding-top in the container will keep them all down by however many pixels you want. For side-to-side, you can set the margins on each inner div. This technique only works with block elements like divs and <p>s, so keep that in mind when you want to position inline stuff : ) This article seems to do a decent job: http://www.digital-web.com/articles/web_design_101_positioning/ There are various articles at sites like AListApart, HTMLdog.com, mezzoblue.com, etc. There's also a sticky thread about positioning and floats at www.sitepoint.com. Click on Forums, and I think it's under Web Design and then HTML and XHTML, written by Paul O'B. I think : )