Add overflow: hidden; to your 'content' css (as below) then remove the <p> tag
.content {
padding: 10px 0;
overflow: hidden;
}
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:
.footer {
margin-top: 5px;
background: #CCC49F;
padding-top: 1px;
padding-right: 0;
padding-bottom: 2px;
padding-left: 0;
height: 30px;
font-size: 10px;
clear: both;
}
