SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    0 Post(s)
    0 Thread(s)

    CANNOT get this sticky footer to work!


    I've made a bunch of sticky footers but this site just hates me or something...or maybe I developed it in WordPress and don't know my WP as well as I should

    Anyway, the URL is

    As you can see the footer, which should be stuck to the bottom of the page is just floating around, being annoying. Anyone have any ideas? I can't seem to get the .body to pay any attention to the height:100%, min-height: 100% declarations.
    tweeting: @biklops

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)

    Wow that wordpress certainly makes it hard to code something so simple. Almost impossible to debug.

    Your main problem is that you are applying the 100% height routines to the element called .container but that is the wrong element. The 100% routines should be applied to the main parent and the first element on the page which in your case is #whitewrap. You need to remove the 100% high routines from container and apply the to #whitewrap instead. The footer also needs to sit outside #whitewrap otherwise it is not pushed down to the bottom.

    #whitewrap{min-height:100%;margin:0 0 -100px}
    * html #whitewrap{height:100%}
    body.custom div#wrapper div#container {
        margin: 40px 0 0;
        padding: 0;
    The move the footer outside of whitewrap like so.
           <!-- #wrapper -->
        <div class="clear"></div>
        <!-- Clear in case footer is missing. -->
        <div class="push"></div>
    <!-- #whitewrap -->
    <div id="footer">
        <div> <span id="copyright">c Andrew Jilka </span> <span id="credit">pixels & code<br/>
            <a href="">BiKlops Design</a> </span> <span id="share">twitter // facebook</span> <span id="gototop"><a href="#top" id="top">go to top</a></span> </div>
    <!-- #footer -->
    You'll probably need to tweak that because you have styles everywhere.

    Don't set min-height and height in the same rule (with the same units) or all you get is a fixed height and nothing more.

    Finally I should point out that the "push" sticky footer method is a very broken implementation of my original technique and you should read the CSS FAQ for the fully working model ( see my sig).

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts