Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Gap between footer image and end of page

9:05 pm on Apr 3, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 3, 2010
votes: 0

Heyya everybody,

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">
<div id="header_image" />
</div> <!-- Header End -->

<div id="navigation">
</div> <!-- Navigation End -->

<div id="content">
<div id="main_content">
</div> <!-- Main Content End -->
<div id="sidebar">
</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:

#footer {
background: url("../images/newfooter.gif") no-repeat;
padding: 0;
margin: 0;
width: 100%;
height: 430px;
border: none;

#content {
width: 960px;
margin: 0 auto;
padding: 15px 0 0 17px;

.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;

#header {
position: relative;

#header_image {
background: url("../images/newheader.gif") no-repeat;
padding: 0;
margin: 0;
width: 100%;
height: 215px;
border: none;

#navigation {
position: absolute;
top: 175px;
left: 335px;

I hope you guys can help me.
3:50 pm on Apr 16, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 16, 2010
posts: 19
votes: 0

i think what you'll have to decide is whether you want to see the footer somewhat lower than the content or you want to fix it to the bottom, as obviously both serve different needs.

to stick it to the bottom, you can use position:fixed and bottom:0 properties in the footer div. I read some articles about position:fixed not being supported in IE6 but when i tested it worked just fine.

the reason for the gap between the footer image and bottom of the page can be because you didn't set the body selector in your css to start with margin:0; padding:0 - this is actually how you should beging all of your html pages (or CSS files):

body { margin:0; padding:0 }

another possibility is that you set the height of the footer div to bigger than the one of the background image, or there's a gap in the original image itself.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members