Spacing between divs

HTML & CSS
1

Hi there,

There seems to be some spacing between the header div and the body div and then between the body div and the footer div. I think I have too many codes going on for my body tag, but not sure how to proceed.

<body>
<div id="container">
 
<div id="mast">
<img src="assets/Mast2.png" width="960" height="76" alt="<snipped />" /></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 class="h1color"><strong>GOOD Lorum VS. BAD Lorum</strong></p>
 
<p><strong>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.</strong></p>
 
<p>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.</p>
 
<p><strong>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.</strong></p>
 
<p>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.</p>
 
<p><strong>THE KEY TO Lorum IS TO SUBSTITUTE BAD Lorum WITH GOOD Lorum IN YOUR DIET.</strong></p>
 
<p>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.</p>
 
<strong>THE GOOD Lorum</strong><br />
<strong>Monounsaturated Lorum</strong><br /> 
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.<br /><br />
 
<strong>POLYUNSATURATED Lorum</strong></br>
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 </p>
 
 
<strong>THE BAD Lorum</strong><br />
<strong>TRANS Lorum </strong>
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.</p>
 
<p>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. </p>
 
<p>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.</p>
 
<strong>SATURATED Lorum</strong><br />
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.<br />
 
<p>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.</p>
 
<p>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.</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%;
    margin: auto;
    background-color: #a38107;
    background-image:url(bg.png);    
    background-repeat: repeat-x;
 
}
#in-container {
    width: 959px;
    margin: auto;
 
 
}
 
#mast {
 
    width: 100%;
    background-image: url(Mast.png);
    background-repeat: repeat-x;
}
 
#main.nav {
    width: 100%;
}
 
#header {
    width: 100%;
 
 
}
 
#body {
    width:959px;
    clear: both;
    font-family: georgia, helvetica neue, helvetica, arial;
    color: #000;
    font-size: 15px;
    background-color: #FFFFFF;
    background-image: url(Body.png);
    background-repeat: repeat-x;
}
 
.h1color {
    font-size: 23px;
    color:     #8eb033;
}
 
#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: 900px;
    padding-left: 25px;
    line-height: 20px;
    text-align: left;
    float: none;
 
}
 
/*------------------ @footer ------------------*/
 
#footer {
    width: 959px;
    height: 117px;
    clear: both;
    font-family: georgia, helvetica neue, helvetica, arial;
    font-size: 11px;
    background-image:url(Footer.png);
    background-repeat: none;
    background-color:#FFFFFF;
 
}
    #footer a {
    color: #ffffff;
    text-decoration: none;
 
 
}
    #footer a:hover {
    color: #2ba6ff;
 
}
    #footer #copyright {
    width: 230px;
    height: 115px;
    padding-left: 15px;
    line-height: 15px;
 
}
    #footer #navb {
    clear: both;
    width: 400px;
    float: right;
    height: 115px;
    text-align: right;
    padding-right: 15px;
 
 
}
2

classic case of margin collapse.
there are many different ways to fix this, such as adding 1px top and bottom padding (or you could use a border instead of padding) to your #footer and #body. you can also reset the way your paragraphs are styled… for example, if you add this:

#body p, #footer p {margin-top:0; margin-bottom:0; padding-bottom:1em; padding-top:1em;}

you should see your problem disappear.

hope that helps.

3

Ahhh simple enough. Thanks!!