SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing between divs

    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.

    HTML Code:
    <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>
    Code CSS:
    @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;
     
     
    }
    Last edited by DaveMaxwell; May 19, 2011 at 07:15. Reason: removed identifying elements per OP request...

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh simple enough. Thanks!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •