title: Content scrolling past page footer
body: <p>In my page layout, the footer is staying wher it is and the content is scrolling past the footer. Is there any way to keep the footer positioned at the bottom of the content ?. You can see how the page looks by visiting <a href="http://www.postcode53.com/layout" rel="nofollow noreferrer">www.postcode53.com/layout.</a></p>
  
  <p>The HTML and CSS are as follows:</p>
  
  <p><strong>HTML</strong>
  
  
      
          
          Housing Partners
          
      
      
          
              </p>
  
  <pre><code>        &lt;div id="header-navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Zach&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
      &lt;div class="menu"&gt;
          &lt;div class="menu-navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Demo&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign UP!&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="image"&gt;
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
          Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
      &lt;/div&gt;
  
      &lt;div class="menu"&gt;
          &lt;div class="menu-navigation"&gt;
              &lt;ul id="menulist"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;div id="maincontent"&gt;
  
          &lt;img src="data.jpg"&gt;&lt;/img&gt;
  
          &lt;div id="extra"&gt;
              &lt;div id="newsletters"&gt;
                  &lt;div id="title"&gt;&lt;h2&gt;LazyZach Newsletters&lt;/h2&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="navigation"&gt;
                  &lt;div id="title"&gt;&lt;h2&gt;Navigation&lt;/h2&gt;&lt;/div&gt; 
                  &lt;ul id="extra-navigation"&gt;
                      &lt;li&gt;Home&lt;/li&gt;
                      &lt;li&gt;Features&lt;/li&gt;
                      &lt;li&gt;Demo&lt;/li&gt;
                      &lt;li&gt;FAQ&lt;/li&gt;
                      &lt;li&gt;Sign Up&lt;/li&gt;
                      &lt;li&gt;About Zach&lt;/li&gt;
                      &lt;li&gt;Contact&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div id="boring-stuff"&gt;
                  &lt;div id="title"&gt;&lt;h2&gt;Boring Stuff&lt;/h2&gt;&lt;/div&gt;
                  &lt;ul id="extra-navigation"&gt;
                      &lt;li&gt;Terms Of Use&lt;/li&gt;
                      &lt;li&gt;Privacy Policy&lt;/li&gt;
                      &lt;li&gt;Copyright Policy&lt;/li&gt;
                      &lt;li&gt;Removal Notice&lt;/li&gt;
                      &lt;li&gt;Partnet With Us&lt;/li&gt;
                      &lt;li&gt;Abuse Desk&lt;/li&gt;
                      &lt;li&gt;Contact Us&lt;/li&gt;
                      &lt;li&gt;Sitemap&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div id="overheard"&gt;
                  &lt;div id="title"&gt;&lt;h2&gt;Overheard on Twitter&lt;/h2&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;center&gt;LAZYZACH IS CREATED BY XYZ GROUP &amp;copy; 2009. ALL RIGHTS RESERVED&lt;/center&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#header {
      margin:0 auto;
      overflow:hidden;
      padding:-5px 0;
      width:100%;
      background:#000000;
  
  }
  
  #banner {
      padding-left:35px;
  }
  
  #header-navigation {
      float:right;
      color:#ffffff;
      font-weight:bold;
      margin:0 80px 0 0;
      padding-right:20px;
      width:250px;
  
  
  }
  #header-navigation a {
      color:#C0C0C0;
      text-decoration:none;
  }
  
  #header-navigation ul li {
      display: inline;
      padding-right:8px;
  
  } 
  
  .menu {
      margin:0 auto;
      padding-right:10px;
      padding:1px;
      width:100%;
      background:#CCCCCC;
  }
  
  
  
  .menu-navigation {
      color:#ffffff;
      font-weight:bold;
      padding-left:0px;
  }
  .menu-navigation a {
      color:#666666;
      text-decoration:none;
  }
  
  .menu-navigation ul li {
      display: inline;
      padding-right:14px;
  
  } 
  
  #menulist li {
      padding-right:250px;
  }
  
  #menulist{
      padding-right:34px;
  }
  
  #image {
      margin:0 auto;
      padding-right:10px;
      padding:1px;
      width:100%;
      background:#ABDB2A;
      color:#FFFFFF;
      font-weight:bold;
  }
  
  #maincontent {
      background:white;
      position:absolute;
  
  }
  
  #extra {
      position:absolute;
      margin:0 auto;
      padding-right:30px;
      padding:1px;
      width:1335px;
      background:#AADB2C;
      color:#000000;
      font-weight:bold;
      border:1px solid;
  
  }
  
  #newsletters {
      float:left;
      margin-right:250px;
  
  
  
  
  }
  
  #navigation {
      float:left;
      margin-right:70px;
  
  
  }
  
  #boring-stuff {
      float:left;
      margin-right:70px;
  }
  
  #footer {
      background:#ffffff;
      position:fixed;
      bottom:0px;
      margin-top:10px;
      left:0;
      width:100%;
      padding-top:10px;
      padding-bottom:10px;
      color:#666666;
  
  }
  
  #extra-navigation {
      list-style-type:none;
      padding-left:0px;
      font-family:Arial, Helvetica, sans-serif;
      font-weight:normal;
      margin-top:-15px;
  ;
  
  
  }
  
  #extra-navigation li {
          margin-bottom:.5em;
  }
  
  
  #newsletters #title {
      /*border-bottom:1px solid;*/
      text-decoration:underline;
      padding-bottom:0px;
      font-weight:bold;
      font-family:Arial, Helvetica, sans-serif;
      margin-left:100px;
  
  
  
  
  
  }
  
  
  #navigation #title {
      /*border-bottom:1px solid;*/
      text-decoration:underline;
      padding-bottom:5px;
      font-weight:bold;
      font-family:Arial, Helvetica, sans-serif;
  
  }
  
  
  
  
  #boring-stuff #title {
      /*border-bottom:1px solid;*/
      text-decoration:underline;
      padding-bottom:5px;
      font-weight:bold;
      font-family:Arial, Helvetica, sans-serif;
  }
  
  
  #overheard {
      margin-left:600px;
      font-weight:bold;
      font-family:Arial, Helvetica, sans-serif;
  
  }
  </code></pre>
  
  <p>Please Help.
  Thank You.</p>