CODEWITHSUNDEEP
html
user
user

Reputation: 7333

Footer covering content HTML

I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.

PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.

Here is the simplified page:

<html>

  <head>
    <style type="text/css">
      #footer{
      background-color: lightblue;
      margin-top: 10px;
      }
    </style>

  </head>

  <body>

    <div id="content" align="center">
      <div style="width:50%;">
        <p align="left">
          Two divs:
          <div style="width:80%; float:left;"><p>A</p></div>
          <div style="width:20%; float:right;"><p>B</p></div>
        </p>
      </div>
    </div>

    <div id="footer" align="center">
      <div style="width:90%;" align="center">
        Here is my footer.
      </div>
    </div>

  </body>
</html>

Upvotes: 0

Views: 123

Answers (2)

Maciej Gurban
Maciej Gurban

Reputation: 5739

Add

<div style="clear:both"></div>

After

<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>

Upvotes: 2

Brian O&#39;Neill
Brian O&#39;Neill

Reputation: 5185

add this to the css: 

#content { overflow: hidden; }

Upvotes: 0

Related Questions