Grow your CSS skills. Land your dream job.

[Solved] Problem with Sticky Footer

  • # January 25, 2010 at 10:17 am

    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:
    < ?php get_header(); ?>

    < ?php if (have_posts()) : ?>

    < ?php while (have_posts()) : the_post(); ?>

    ” rel=”bookmark” title=”< ?php the_title_attribute(); ?>“>< ?php the_title(); ?>
    < ?php the_content('Read the rest of this entry »'); ?>

    < ?php endwhile; ?>

    • < ?php next_posts_link('« Older Entries') ?>
    • < ?php previous_posts_link('Newer Entries »') ?>

    < ?php else : ?>

    Not Found

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

    < ?php include (TEMPLATEPATH . "/searchform.php"); ?>

    < ?php endif; ?>

    < ?php get_footer(); ?>

    And my footer.php from WordPress:

    Code:

    < ?php wp_footer(); ?>

    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?

    # January 26, 2010 at 2:19 pm

    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.

    # February 2, 2010 at 5:20 am
    "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.

    # February 8, 2010 at 8:54 am

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".