2 Replies Latest reply on Mar 29, 2010 3:32 AM by mhtruflo

    Can't get rid of gap around edge

    mhtruflo Level 1

      Hi there,

       

      I'm struggling to get rid of the gap around the edge of the website I've just started building.  I've got the margins set to 0 for the top, and the divs are 100% width.  Does anybody have any ideas?  I've attached a picture to demonstrate and also please see the code pasted in below, in case that's useful.

       

      Thanks,

       

      Mark

      26-03-2010 14-28-26.png

      Code:

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      <!--
      #header {
          background-image: url(images/header_background.jpg);
          background-repeat: repeat-x;
          height: 230px;
          width: 100%;
          margin-top: 0px;
      }
      #navbar {
          background-image: url(images/navbar_background.jpg);
          background-repeat: repeat-x;
          height: 34px;
      }
      #container_navbar {
          height: 34px;
          width: 852px;
          margin-right: auto;
          margin-left: auto;
      }
      #main_text {
          background-image: url(images/maintext_background.jpg);
          background-repeat: repeat-x;
          height: 536px;
          width: 100%;
      }
      #container_header {
          background-image: url(images/header_image.jpg);
          background-repeat: no-repeat;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          height: 230px;
          width: 852px;
      }
      #container_maintext {
          height: 536px;
          width: 852px;
          margin-right: auto;
          margin-left: auto;
      }
      #footer {
          background-image: url(images/footer_background.jpg);
          background-repeat: repeat-x;
          height: 200px;
          width: 100%;
      }
      #container_footer {
          height: 200px;
          width: 852px;
          margin-right: auto;
          margin-left: auto;
      }
      -->
      </style>
      </head>

       

      <body>
      <!--Header-->
      <div id="header">
        <div id="container_header"></div> 
      </div>
      <!--Navbar-->
      <div id="navbar">
        <div id="container_navbar">SPRY MENU GOES HERE</div>
      </div>
      <!--Main Text-->
      <div id="main_text">
        <div id="container_maintext">MAIN CONTENT GOES HERE</div></div>
      </div>
      <!--Footer-->
      <div id="footer">
        <div id="container_footer">FOOTER CONTENT GOES HERE</div>
      </div>
      </body>
      </html>