Add overflow: hidden; to your 'content' css (as below) then remove the <p> tag
padding: 10px 0;
What is happening is you have floated elements in your 'content' <div> so you need to use a clearing method to position the 'footer' where its supposed to go.
As an alternative you could have also added clear: both; to the 'footer' css:
Thank you so very much.
I had a similar problem about a year ago and was given the same solution but it obviously fell out of my brain at some point.