CANNOT get this sticky footer to work!

HTML & CSS
1

Grrrr! :mad:

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 :confused:

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.

2

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.


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.


       <!-- #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).