title: How to make perfect div for Footer of webpage?
body: <p>I'm trying to get the div for my footer (id="Footer") to be 10px from the bottom of my screen. For example, if my page content cannot fill the height of the screen, I want the div to be 10px from the bottom.</p>
  
  <p>If my page content extends further than the bottom of the screen (creating a scroll area), I want the div to still be at the very bottom with a 10px margin from the bottom.</p>
  
  <p>I was using <code>position: absolute</code> but that causes my content to fall underneath the footer div if content stretches past page screen height.</p>
  
  <p><strong>HTML</strong>:
   <code>&lt;div id="Footer" &gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&amp;copy; Copywright  2012 Company. All Rights Reserved&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;</code></p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>#Footer  table {
     width: 100%;
     max-width:1250px;
     bottom:0px;
     height:30px;   /* Height of the footer */
     font-weight:bolder;
     background-color: black;
     margin-left: auto;
     margin-right: auto;
      text-align:center;
      color: white;
      font-size:20px;
      border: 3px white solid;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;  
  } 
  #Footer  {
      clear: both;
      position: absolute;
      bottom: 10px;
      background-color: #15317E;
      clear: both;
      width: 1250px;
  }
  </code></pre>