so I'm building my very first website (It's going to be Wordpress theme eventually) using only hand-made XHTML and CSS. Currently I'm just working on getting the site to look right with mock-up content, hence there's no actual wordpress code in it yet. I've managed to overcome most of the problems so far and I enjoyed it quite a lot, but this one gives me a headache -
What I want is my footer to stick to the very bottom of the page, maintaining its' fixed height and have the content push it down as it needs to be done. Now the content seems to push the footer down just fine, but for some reason there's a gap of about 10-20px between the end of the footer image and the very end of the page in the browser and I have NOOO idea where that comes from.
The page consists of a centered two-column layout with a width of 960px - the header and the footer are both full width and I gave both a fixed height.
Here's my basic div layout: (Of course there's content in between the divs, but I have no idea if it's relevant - just gonna leave it out for now)
<div id="header_image" />
</div> <!-- Header End -->
</div> <!-- Navigation End -->
</div> <!-- Main Content End -->
</div> <!-- Sidebar End -->
</div> <!-- Content End -->
<p class="clear" />
<div id="footer" />
CSS that I think is relevant, but just ask if you need more info:
background: url("../images/newfooter.gif") no-repeat;
margin: 0 auto;
padding: 15px 0 0 17px;
background: url("../images/newheader.gif") no-repeat;
I hope you guys can help me.