I have the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<?php include 'layouts/head.phtml'; ?>
</head>

<html>
  <body>
    <div id="container">
      <img id="tree-bug" src="images/Ladybug_Header_TreeBug.jpg" />
      <div id="branding">
        <img id="branding-image" src="images/Ladybug_Header_Logo.jpg" />
      </div>
      <div id="container-inner">&nbsp;</div>
    </div>
  </body>
</html>

And this stylesheet:

#container {
  width: 100%;
  background: #6ead3b url('../images/LB_BGtile.jpg') repeat-x scroll;
}


    #container-inner {
      position: relative;
      top: 100px;
      margin: auto 12%;
      height: 400px;
      width: 75%;
      background-color: #f0f4f5;
    }

    #branding {
      position: relative;
      bottom: 0;
      margin: auto 25%;
      display: inline;
    }

My question is why isn't the parent DIV expanding to contain the child DIV?

1 answer

0
points
This was chosen as the best answer

Because the child div is relatively positioned. Relative positioning basically means "please move this div to a new location while pretending that it remains in it's old location."

I'd suggest using margin-top or padding-top on the child div if possible. If not, you can add padding to the bottom of your parent div (equal to the amount of relative positioning you applied).

Answered over 6 years ago by Joshua Clanton