SitePoint Sponsor

User Tag List

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

    CANNOT get this sticky footer to work!

    Grrrr!

    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 http://andrewjilka.biklopsdesign.com/?page_id=12

    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
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    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.

    Code:
    html,body{height:100%}
    #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.
    Code:
           <!-- #wrapper -->
        <div class="clear"></div>
        <!-- Clear in case footer is missing. -->
        <div class="push"></div>
    </div>
    <!-- #whitewrap -->
    <div id="footer">
        <div> <span id="copyright">c Andrew Jilka </span> <span id="credit">pixels & code<br/>
            <a href="http://www.biklopsdesign.com">BiKlops Design</a> </span> <span id="share">twitter // facebook</span> <span id="gototop"><a href="#top" id="top">go to top</a></span> </div>
    </div>
    <!-- #footer -->
    </body>
    </html>
    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

Bookmarks

Posting Permissions

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