[Solved] Problem with Sticky Footer

[Illogical]

I am building a new WordPress theme and am using the Screencast of Chris as a sort of guideline (since I forgot alot of stuff on the way). For some reason I got a problem with sticking my footer to the bottom of my browser screen.

See: http://img37.imageshack.us/img37/4810/stickyfootero.png

I used Google and the forums to maybe find a solution, but no luck. All code is the same as mine and there is no difference in either FF (my main browser) and IE.

My CSS file:

Code:

#page-wrap { width: 980px; margin: 0px auto -150px; min-height: 100%; height: auto !important; height: 100%; }
#push { height: 150px; }

#main { width: 980px; float: left; margin-top: 10px; background: url(style/images/mainbg.png);
min-height: 100%; height: auto !important; height: 100%; }

#footer { height: 150px; width: 980px; background: url(style/images/footerbg.png); }
#footer-inside { width: 980px; margin: 0 auto; }

My WordPress Index.php:

Code:

” rel=”bookmark” title=”“>

Not Found

Sorry, but you are looking for something that isn’t here.

And my footer.php from WordPress:

Code:

is proudly powered by WordPress | “>Entries (RSS) | “>Comments (RSS).

If I remove the <div class="clear"></div> from the footer, nothing changes, BUT when I put it after the <div id="push"></div> it sticks my footer to the bottom of my main.

I can’t figure out what the issue is. Anyone can help me out?

[Illogical]

Hmm… So far I have ‘fixed’ the problem of the footer not sticking to the bottom of the screen… but there is still a big space between the page and the footer, which is exactly the space created by the push class.

[Illogical]

"Illogical" wrote:

Hmm… So far I have ‘fixed’ the problem of the footer not sticking to the bottom of the screen… but there is still a big space between the page and the footer, which is exactly the space created by the push class.

Update; I haven’t solved that either… When I made an extra page having almost no content the footer didn’t sticked anymore. And for some reason it now keeps 5px on the bottom of the footer not sticking it. 5 Pixels I can’t find, nor are caused by some margin/padding.

[Illogical]

Solved by rebuilding the structure from scratch, strange enough there wasn’t a difference between the original structure which couldn’t get the footer to stick and the new one.

[Author]

Posts