homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Gap between footer image and end of page

Msg#: 4109558 posted 9:05 pm on Apr 3, 2010 (gmt 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.



Msg#: 4109558 posted 3:50 pm on Apr 16, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved