I would like to have several absolutely positioned div containers within my one larger centered “all” div that will have to have relative positioning so that it can be centered in the browser so that I have complete control over the inside div’s while still being able to have a centered page. I tried doing this:
<body>
<div id="all">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
With this as the css:
#all
{
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
width:1000px;
height:1300px;
}
#header
{
background-color:#ff0000;
position:absolute;
top:0px;
left:0px;
width:1000px;
height:200px;
}
#main
{
background-color:#00ff00;
position:absolute;
top:200px;
left:0px;
width:1000px;
height:1000px;
}
#footer
{
background-color:#0000ff;
position:absolute;
top:1200px;
left:0px;
width:1000px;
height:100px;
}
But yet the #header, #main and #footer were all separate and aligned to the top and to the left un-centered and completely separate from there parent div #all as #all was centered like it should be. Can someone explain why this is happening and tell me a fix?
Give
#allposition:relative;and things should work as expected.