CODEWITHSUNDEEP
htmlcsslayoutpositioning
semicolon
semicolon

Reputation: 2580

Absolute positioning relative to containing div

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?

Upvotes: 0

Views: 539

Answers (1)

Jared
Jared

Reputation: 12524

Give #all position:relative; and things should work as expected.

Upvotes: 3

Related Questions