4 Replies Latest reply on Apr 4, 2012 3:18 PM by polar_bare

    Space between content and logo

    AdamDowning

      Playing with fluid layouts and getting a space between logo and content DIV's

       

       

      <!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" xml:lang="en" lang="en">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Playing with Liquid Layouts</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
      </head>
      
      
      <body>
      <div id="container">
                <div id="logo">
                    <h1>Welcome to Liquid Layouts</h1>
                    <h2 class="logo">Place your slogan here...</h2>
                </div>
      
      
                <div id="navigation">
          <ul>
                    <li>Home</li>
              <li>Page 1</li>
              <li>Page 2</li>
              <li>Page 3</li>
              <li>Page 4</li>
              <li>Page 5</li>
          </ul>
          </div>
      
      
          <div id="content">
          <h1>Adding this element creates a space between logo and content...</h1>
          </div>
      
      
                <div id="footer">
          </div>
      </div>
      </body>
      </html>
      
      

       

       

      @charset "utf-8";
      /* CSS Document */
      
      
      body
      {
                text-align: center;
      }
      
      
      div#container
      {
                margin-left: auto;
                margin-right: auto;
                min-width: 600px;
                max-width: 2000px;
                text-align: left;
                width: 85%;
      }
      
      
      div#logo h1, h3
      {
                padding-left: 20px;
                margin-bottom: 0;
      }
      
      
      div#logo h2
      {
                padding-left: 35px;
                margin-top: 0;
                font-size: 125%;
      }
      
      
      div#logo
      {
                background-color: #F00;
                width: 100%;
                height: 300px;
      }
      
      
      div#navigation
      {
                background-color: #0F0;
                width: 25%;
                height: 600px;
                float: left;
      }
      
      
      div#navigation ul
      {
                padding-left: 25%;
                font-size: 150%;
                list-style-type: square;
      }
      
      
      div#content
      {
                background-color: #C93;
                width: 100%;
                height: 600px;
                margin-top: 0px;
      }
      
      
      div#footer
      {
                background-color: #69F;
                height: 30px;;
      }
      
      
      .footerP
      {
                margin-top: 0px;
                padding-left: 2%;
                line-height: 35px;; 
      }
        
      
      

       

      PICTURE:

      [IMG]http://i.imgur.com/1nGUG.jpg[/IMG]