DIV Overflow

Hi there,

I’m basically trying to add more content to the Body of my page, but every time I do that, the background is not expanding and the footer and body are merging together. I think it has something to do with my floats and or my containers. Any help would be greatly appreciated. Thank you!

<body>
<div id="container">
 
<div id="mast">
<img src="assets/Mast2.png" width="960" height="76" alt="<snip />" /></div>
 
<div id="main.nav">
  <img src="assets/Nav.png" alt="<snip />" width="996" height="49" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="68,15,128,42" href="index.html" alt="<snip />" />
    <area shape="rect" coords="186,15,293,42" href="health.html" alt="<snip />" />
    <area shape="rect" coords="365,16,473,44" href="resources.html" alt="<snip />" />
    <area shape="rect" coords="540,17,644,44" href="seminars.html" alt="<snip />" />
    <area shape="rect" coords="719,16,787,44" href="blog.html" alt="<snip />" />
    <area shape="rect" coords="845,16,928,44" href="contact.html" alt="<snip />" />
  </map>
</div>
 
 
<div id="in-container">
 
 
 
 
 
<div id="header"><img src="assets/Header.png" width="959" height="298" alt="<snip />" /></div>
 
<div id="body">
 
<div id="healthcontent">
  <p>&nbsp;</p>
  <p><strong>Lorum</strong> brings the latest news in <br />
    green and healthy living. Learn how to make a home safer and healthier. </p>
 
  <p><strong>Lorum</strong> brings you:</p>
 
  <ul>
 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
 </ul>
 
  <em><ol>Check back often as we launch new content!</ol></em></p>
</div>
 
</div>
<div id="footer">
  <div id="navb">
 
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p><a href="index.html" target="_self">Home</a> -
          <a href="health.html" target="_self">Health Tips</a> - 
          <a href="resources.html" target="_self">Resources</a> -
          <a href="seminars.html" target="_self">Seminars</a> -  
        <a href="blog.html" target="_self">Blog</a> - <a href="contact.html" target="_self">Contact</a></p>
</div>
 
 
  <div id="copyright">
    <p>&nbsp;</p>
    <p><br />
      &copy; 2011 <snip /> <br />
      Web Design by <a href=""><snip />.</a></p>
</div>
 
</div>
 
</div></div></body>
@charset "UTF-8";
/* CSS Document */
 
/*------------------ @reset ------------------*/
 
html, body {
    margin: 0;
    padding: 0;
    font-family: georgia, helvetica neue, helvetica, arial;
    font-size: 9px;
    color: #fff;
    background: #fff;
    text-align: center;
    height: 100%;
}
 
/*------------------ @body ------------------*/
 
body {
    background: #fff;
    background-color: #fff;
}
 
a {
    font-weight: bold;
}
    a:link {
    color: #8fb934;
    text-decoration: none;
}
    a:visited {
    color: #000000;
    text-decoration: none;
}
    a:hover {
    color: #00543d;
    text-decoration: none;
}
    a:active {
    color: #8fb934;
    text-decoration: none;
}
 
 
#container {
    width: 100%;
    height: 1080px;
    margin: auto;
    background: fff;
    background-image:url(bg.png);    
    background-repeat: repeat;
}
#in-container {
    width: 959px;
    margin: auto;
    text-align: left;
}
 
#mast {
    height: 77px;
    width: 100%;
    background-image: url(Mast.png);
    background-repeat: repeat-x;
}
 
#main.nav {
    height: 49px;
}
 
#header {
    height: 298px;
}
 
#body {
    height: 483px;
    width:959px;
    clear: both;
    font-family: georgia, helvetica neue, helvetica, arial;
    color: #000;
    font-size: 15px;
    background-image: url(Body.png);
    background-repeat: repeat-y;
}
 
#body #homecontent {
 
    width: 500px;
    padding-left: 25px;
    line-height: 20px;
    float: left;
 
 
} 
    #body #DYK {
    float: right;
    width: 230px;
    height: 210px;
    text-align: right;
    padding-right: 50px;
    padding-top: 20px;
    background-image:url(DYK.png);
    background-repeat:no-repeat;
 
}
    #body #DYK #text {
    width: 200px;
    height: 125px;
    font-family: georgia, helvetica neue, helvetica, arial;
    font-size: 12px;
    color: #000;
    text-align: left;
    line-height: 12px;    
    padding: 25px;
 
 
}
 
 
#body #seminarscontent {
 
    width: 959px;
    line-height: 20px;
    float: left;
    font-family: georgia, helvetica neue, helvetica, arial;
    font-size: 12px;
    color: #000;
 
 
} 
#body #healthcontent {
 
    width: 930px;
    padding-left: 25px;
    line-height: 20px;
    float: none;
 
}
 
/*------------------ @footer ------------------*/
 
#footer {
    height: 117px;
    width: 959px;
    clear: both;
    font-family: georgia, helvetica neue, helvetica, arial;
    font-size: 11px;
    background-image:url(Footer.png);
 
}
    #footer a {
    color: #ffffff;
    text-decoration: none;
 
 
}
    #footer a:hover {
    color: #2ba6ff;
 
}
    #footer #copyright {
    width: 230px;
    height: 115px;
    padding: 15px;
    line-height: 15px;
 
}
    #footer #navb {
    clear: both;
    width: 400px;
    float: right;
    height: 115px;
    text-align: right;
    padding: 15px;
 
}
 
    

Basically, never set a fixed height on an element that may need to expand:

#container {
  background-image: url("bg.png");
  background-repeat: repeat;
  [COLOR="Red"]height: 1080px;[/COLOR]
  margin: auto;
  width: 100%;
}


#body {
  background-image: url("Body.png");
  background-repeat: repeat-y;
  clear: both;
  color: #000000;
  font-family: georgia,helvetica neue,helvetica,arial;
  font-size: 15px;
  [COLOR="Red"]height: 483px;[/COLOR]
  width: 959px;
}


#footer {
  background-image: url("Footer.png");
  clear: both;
  font-family: georgia,helvetica neue,helvetica,arial;
  font-size: 11px;
  [COLOR="Red"]height: 117px;[/COLOR]
  width: 959px;
}

Any extra content will pour out and cause endless misery. :slight_smile:

Easy enough - thank you so much!

You’re welcome! Glad it was so easy. :slight_smile: