title: Trouble on footer
body: <p>I have successfully got my footer to stick to the bottom of the page, however now there is a few pixels left under the bottom of the div. I would like to get rid of this space. There is also and issue with the footer colliding with the content div. How can I stop that?</p>
  
  <pre><code>&lt;main id="content"&gt;
  &lt;/main&gt;
  &lt;div id="push"&gt;&lt;/div&gt;
  &lt;footer id="footer"&gt;
      &lt;p&gt;&amp;copy; FrontYard Fairways 2015. All rights reserved.&lt;/p&gt; 
      &lt;p&gt;
         &lt;a href="http://validator.w3.org/check/referer"&gt;
             &lt;img src="http://www.netwebdev.net/webclass/images/valid-html5.png" alt="Valid HTML5!" height="15" width="80" /&gt;
         &lt;/a&gt;
      &lt;/p&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#content
  {
      border: 1px solid green;
      position: relative;
      display: block;
      height: 54%;
      width: 100%;
      margin: none;
      padding: none;
  }
  
  #footer, #push
  {
      clear: both;
  }
  
  #footer
  {
      border: 1px dotted black;
      position:absolute;
      margin: 0 auto;
      bottom: 0;
      right: 0;
      padding: none;
      width: 100%;
      height: 10%;
  }
  </code></pre>