Trouble on footer

Question

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?

<main id="content">
</main>
<div id="push"></div>
<footer id="footer">
    <p>&copy; FrontYard Fairways 2015. All rights reserved.</p> 
    <p>
       <a href="http://validator.w3.org/check/referer">
           <img src="http://www.netwebdev.net/webclass/images/valid-html5.png" alt="Valid HTML5!" height="15" width="80" />
       </a>
    </p>
</footer>

CSS:

#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%;
}

Answer 1

Remove the % height on the footer div, remove the image from the <p> tags. Set the image to display: block.

jsfiddle

#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%;
}

img {
    display: block;
}

<main id="content">

        </main>
        <div id="push"></div>
        <footer id="footer">
            <p>&copy; FrontYard Fairways 2015. All rights reserved.</p><a href="http://validator.w3.org/check/referer"><img src="http://www.netwebdev.net/webclass/images/valid-html5.png" alt="Valid HTML5!" height="15" width="80" /></a>
        </footer>

Answer 2

To remove the pixels from under the footer, set the body's margin to 0:

body, html{
width:100%;
height:100%;
margin:0;
}

The problem with the footer and the main is that the footer has absolute positioning, which places it out of the layout and above the other elements. You were using it to make it stay on the bottom of the page, so either remove the absolute positioning, or give #content a padding bottom that is the height of the footer:

#content{
padding-bottom:100px;
}