Grow your CSS skills. Land your dream job.

Sticky Footer Method

  • # February 7, 2013 at 12:33 pm

    @Paulie_D, I removed position: absolute; and the footer neither centered nor is it sticking to the bottom of the page anymore. @Senff, is this because I have the body as the “main block?” So, basically, I need to take everything I modified on the body and place it on #wrapper?

    # February 7, 2013 at 12:36 pm

    Well I did it in Chrome Developer tools and it did so that’s where that came from.

    To center it on your front page you need to add

    margin:0 auto;

    As for the stickyness, then @Senff has covered that. The footer needs to be outside of the wrapper AFAIK.

    # February 7, 2013 at 12:37 pm

    And this is the code for a page:

    < ?php Starkers_Utilities::get_template_parts( array( 'parts/shared/html-header', 'parts/shared/header' ) ); ?>

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

    < ?php Starkers_Utilities::get_template_parts( array( 'parts/shared/footer','parts/shared/html-footer' ) ); ?>

    So, how do I make the footer no longer in the #wrapper? Thank you for all of your help thus far.

    Edit #1: Hmm, the PHP didn’t come out right once I posted it. Hopefully, you can still understand it.

    Edit #2: Also, @Senff, check my front page. That is the one currently being edited. I have yet to change anything for page.php. Also, I am back where I started. The footer is centered and below the content, but it is no longer sticking to the bottom of the page when I scroll out. Grrsome.

    # February 7, 2013 at 12:50 pm

    @mintertweed, that bit of code to take your footer out of the wrapper should be located in footer.php

    # February 7, 2013 at 12:55 pm

    I am using the Starkers theme and they differentiate between the physical footer and the part of the footer that involves HTML. So, for footer.php, I have this:

    And then for the html-footer.php, I have this:


    < ?php wp_footer(); ?>

    Kind of weird and a bit unnecessary, but as you can see, the footer is placed after the end of #wrapper. This is why I can not figure out why it is appearing inside the #wrapper.

    Edit: I am thoroughly confused and I am starting to get a headache. I do not see how I am supposed to fix this.

    # February 7, 2013 at 1:59 pm

    Here try mine. It doesn’t get any easier http://www.visibilityinherit.com/code/css3-sticky-footer.php

    # February 7, 2013 at 2:46 pm

    I chose the first option because I still can not figure out how to get my footer out of the wrapper, even though I have my code set-up with the footer outside. But anywho, it works. But there is one little problem. I would like for my header to span the width of the page. Not just 960px. This is my current code for my #wrapper and footer:

    #wrapper {
    width: 960px;
    /*width: 100%;*/
    min-height: 100%;
    position: relative;
    padding-bottom: 70px;
    clear: both;
    margin:0 auto;
    }

    footer {
    margin-top: -70px;
    height: 70px;
    border-top: 5px solid #A11517;
    clear: both;
    width: 960px;
    bottom: 0;
    /*margin: 0 auto;*/
    position: absolute;
    }

    I have width: 100%; commented out because if it were not, my footer would go to the left side. With it commented out, my footer stays centered. But let us assume I apply width: 100%; on #wrapper. That would mean that I would have to go to footer and comment out position: absolute; and apply margin: 0 auto; and we both know that if I do that, the footer is no longer sticky.

    So, how do I fix this?

    # February 7, 2013 at 2:53 pm

    @mintertweed, you should make footer 100%, and style the border on footer-inside, and give that the width of 960px..that’s what I would do

    so…for example, pardon the nesting, but:

    footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    .footer-inside {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    border-top: 5px solid red;
    }
    }

    # February 7, 2013 at 3:21 pm

    @Paulie_D, @Senff, @yeeyang,
    @JamesMD: I can’t freakin’ believe it. I actually figured it out. I created a blank PHP file called template.php and I was copying and pasting code from my WordPress PHP documents in the order that they execute. I then noticed that nothing was wrong with my code. This made me a little angry because something had to be wrong with my code, otherwise Firebug would not clearly be stating that the footer was inside the #wrapper. And then I noticed it!

    < ?php Starkers_Utilities::get_template_parts( array( 'parts/shared/footer', 'parts/shared/html-footer') ); ?>

    It is part of the Starkers theme that was doing it. There is a line of PHP code at the end of index.php that calls footer.php before html-footer.php. So, effectively, the code that contains the footer is called after the footer has already been established, which means it gets tossed into the #wrapper. So, I simply switched the order it was calling it in and voila! The footer is now outside of the #wrapper! I then went to @Eric‘s site and proceeded to use the code that explains how to make a sticky footer when the footer is outside of the #wrapper and everything is working now. Well, on the front page at least. But I know what to look for now. Sorry if I annoyed some of you with this. I knew I had programmed it correctly…it was the damn theme that got me.

    # February 7, 2013 at 3:24 pm

    @mintertweed, you’ll have to change all templates if you’d like to go that route (single.php, page.php, archive.php, etc) I’ve never used Starkers, so I don’t know how detailed their template system is out of the box.

    # February 7, 2013 at 3:35 pm

    @ChrisP, I like it because it is a completely nude theme, stripped of everything except for what makes WordPress tick. That way, I have total freedom over my design. Also, if I really wanted to, I could get rid of html-header.php and html-footer.php, combine them with their fellow PHP documents, and simply call the header and footer like they are normally called. That is the only weirdness I have noticed thus far.

    # February 7, 2013 at 3:39 pm

    @mintertweed, I completely understand, I use [_S](http://underscores.me/ “”) and [Thematic](http://themeshaper.com/thematic/ “”) for those same reasons. Complete control over design.

    I recently started a project with the [HTML5Boilerplate theme](http://wordpress.org/extend/themes/boilerplate “”) too, to try it out, as I like the [HTML5BP](http://html5boilerplate.com/ “”) as a starting point for static sites.

Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.

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