Question

This is a link to apparently the “best” solution to a sticky footer (which only docks when there is little content on the page).

http://ryanfait.com/sticky-footer/

When you resize the window in any other browser (Firefox, chrome I tested with) the footer moves with the window. In IE7 it doesn’t move, and you need to refresh the page to have it position itself correctly.

Google seemed to be able to do it, so I’m wondering, how have they managed to do this and I cant? Are they using JavaScript, or is there an elegant CSS solution I’m missing?

Answer 1

I’ve used Chris Coryier’s solution before and never had any issues with IE: http://css-tricks.com/snippets/css/sticky-footer/

CSS

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#footer { 
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>