3 Replies Latest reply on Apr 22, 2010 9:27 PM by martcol

    Wierd space at the top of my div

    thersher Level 1

      I'm using the DW template "oneColFixCtrHdr.css", which I've used before, but never experienced this problem. There is a huge space above the header. I can't quite figure out if it's above the container, or above the header, but I know I can't get rid of it! The site isn't launched yet, but here's the source 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" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Broken Road Ranch:: Clifton, Montana</title>
      <!-- TemplateEndEditable -->
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <link href="../css/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body class="oneColFixCtrHdr">

       

      <div id="container">
        <div id="header">
            <div id="navigation"></div> </div>
          <!-- end #header -->
        <div id="mainContent">
          <h1> Main Content </h1>
          <p>Lorem ipsum .......</p>
          <h2>H2 level heading </h2>
          <p>Lorem ipsum dolor .....</p>
          <!-- end #mainContent --></div>
        <div id="footer">
          <!-- end #footer -->
        </div>
      <!-- end #container --></div>
      </body>
      </html>

       

      And here's the css:

       

      @charset "utf-8";
      body {
          font: 100% Verdana, Arial, Helvetica, sans-serif;
          background: #785219;
          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
          padding: 0;
          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
          color: #5B3F13;
      }
      .oneColFixCtrHdr #container {
          width: 1100px;
          margin: 0 auto;
          text-align: left;
      }
      .oneColFixCtrHdr #header {
          padding: 0px 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
          background-image: url(../images/banner.jpg);
          height: 316px;
      }
      .oneColFixCtrHdr #header h1 {
          margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
          padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
      }
      .oneColFixCtrHdr #mainContent {
          padding: 0 110px;
          margin: -25px 0;
          background-image: url(../images/main_bg.jpg);
      }
      .oneColFixCtrHdr #footer {
          padding: 0 10px;
          height: 377px;
          background-image: url(../images/footer.jpg);
      }
      .oneColFixCtrHdr #footer p {
          margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
          padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
      }
      #navigation {
          margin-top: 240px;
          width: 700px;
          height: 30px;
          margin-left: 150px;
      }

       

      Any help is appreciated, as always!

        • 1. Re: Wierd space at the top of my div
          martcol Level 4

          I think I can see too many </div>s in there.

           

          Somehow, an extra one has crept in.

           

          Martin

          • 2. Re: Wierd space at the top of my div
            thersher Level 1

            I've got a navigation div inside my header div, which of course is inside of my container div....is that a no-no? To nest too many divs like that? I took it out and the space went away . I wanted the navigation on a certain spot in the header background image. Is there a workaround for this maybe? I've tried relative positioning, but that didn't help.

            • 3. Re: Wierd space at the top of my div
              martcol Level 4

              My comment was to say I think you have a tag mismatch i.e. you have an extra </div> somewhere.

               

              As for too many nested divs I think that you can nest away to your heart's content!  I have to say, I haven't ever seen any more than 3 or 4 nested levels but I don't think there's a limit.  For me it would be about the complexity of the page and keeping track of what's in what!

               

              The important thing is that you want to try to use HTML for what it is for.  So a <p> is for paragraph, a <li> is for a list and so on.

               

              It's not unusual for a container <div> to contain everything including <div id="heaer"> which will then containg other content including <div="navigation"> or something.

               

              Martin