Sticky footer floating to top of one page

I'm having difficulty figuring out why my sticky footer is working on the main page of my site, but not on another. The paragraph in the footer div stays at the bottom of the page, but the background div floats to the top of the page behind the navigation bar. Here's a fiddle of the page with the broken footer: http://ift.tt/1LJ3gZU And the homepage with the working footer: http://ift.tt/1LJ3gZW

I'm using an this CSS create the footer–

.pagewrap {
min-height: 100%;
margin-bottom: -65px; 
display: block;
}

.pagewrap:after {
content: "";
display: block;
}

.footer, .pagewrap:after {
height: 65px; 
margin-bottom: -65px;
}

.footer {
display: block;
background: #E0E0E0;
color: #999;
border-top: solid 1px #DDD;
}