5 Replies Latest reply on Feb 5, 2010 3:45 PM by vwgn

    Why Gaps Between Div Tags?

    njdesigner1944
      Hi,
      
      What causes "gaps" between div tags? I would like the top of the footer to butt up into the bottoms of the left column and right columns.
      For the footer css I put in a setting of Clear:both,but I still don't know why it's behaving this way. Any help or advice would be welcomed. Thanks.
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      <!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>
      <link href="layout3.css" rel="stylesheet" type="text/css" />
      </head>
      
      <body> 
      <div id="wrapper">
        <div id="header">
          <ul class="last">
            <li>home</li>
            <li>sitemap</li>
            <li>news</li>
            <li class="last">downloads</li>
          </ul>
        </div>
        <div id="photonavbar">photo</div>
        <div id="navbar">
          <ul>
            <li>about us </li>
            <li>services</li>
            <li>products</li>
            <li>clientele</li>
            <li class="last">contact</li>
          </ul>
        </div>
        <div id="banner"></div>
        <div id="leftcol">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce </p>
        </div>
        <div id="rightcol">Content for  id "rightcol"
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </p>
        </div>
        <div id="footer">copyright©2005 www.YourWebCompany.com All rights reserved. Powered by etheosweb.com</div>
      </div>
      </body>
      </html>
      body {
           margin: 0px;
           padding: 0px;
           font-family: Verdana, Geneva, sans-serif;
           font-size: .7em;
           background-color: #333;
      }
      #wrapper {
           padding: 0px;
           width: 800px;
           margin-right: auto;
           margin-left: auto;
      }
      #wrapper #header {
           background-color: #000;
           color: #FFF;
           text-align: right;
           padding: 5px;
      }
      #wrapper #header ul {
           margin: 0px;
           padding: 0px;
           list-style-type: none;
      }
      #wrapper #header ul li {
           display: inline;
           padding-right: 10px;
           padding-left: 10px;
           border-right-width: 1px;
           border-right-style: solid;
           border-right-color: #FFF;
      }
      #wrapper #header ul li.last {
           border-top-style: none;
           border-right-style: none;
           border-bottom-style: none;
           border-left-style: none;
      }
      #wrapper #photonavbar {
           padding: 15px;
           float: left;
           width: 140px;
           background-color: #000;
           color: #FFF;
      }
      #wrapper #navbar {
           background-color: #000;
           color: #ECECEC;
           text-align: right;
           padding-top: 4.5em;
           padding-bottom: 10px;
      }
      #wrapper #navbar ul {
           padding: 0px;
           margin: 0px;
           list-style-type: none;
      }
      #wrapper #banner {
           background-image: url(images/candles_across.jpg);
           background-repeat: no-repeat;
           height: 72px;
      }
      #wrapper #navbar ul li {
           display: inline;
           padding-right: 10px;
           padding-left: 10px;
           border-right-width: 1px;
           border-right-style: solid;
           border-right-color: #FFF;
      }
      #wrapper #navbar ul li.last {
           border-top-style: none;
           border-right-style: none;
           border-bottom-style: none;
           border-left-style: none;
      }
      #wrapper #leftcol {
           padding: 15px;
           width: 140px;
           float: left;
           background-color: #000;
           color: #FFF;
      }
      #wrapper #rightcol {
           padding: 15px;
           width: 600px;
           margin-left: 170px;
           background-color: #000;
           color: #FFF;
      }
      #wrapper #footer {
           background-color: #000;
           color: #FFF;
           padding: 5px;
           clear: both;
           text-align: center;
      }