Sticky footer not sticking

Question

Link to site: http://www.bigideaadv.com/xsp

I'm trying to get the footer to stick. Works okay in Firefox, not so in IE and Safari/Chrome. When the window gets too small, the footer switches from a fixed position to a more fluid one that is supposed to rest at the bottom of the page.

If you shorten the window and then scroll to the bottom of the page, then expand the page till the scrollbar ends, the footer sits about 50-100px above the bottom of the page. Does anyone know why this happens?

CSS:

    html, body {
                    width: 100%;
                    height: 100%;
    }

    #wrap {
        min-height:100% !important;
    }

    #wrap:before { /* Opera and IE8 "redraw" bug fix */
        content:"";
        float:left;
        height:100%;
        margin-top:-999em;
    }

    #container {
        position: relative;
        /*margin: 72px 0 172px 0;*/
        top: 72px;
        bottom: 172px;
        width: 100%;
        height: auto;
        overflow: auto;
    }

    #top_navigation {
        position: fixed;
        min-width: 1010px;
        width: 100%;
        height: 72px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
        z-index: 2000;
    }

    #bottom_navigation {
        position: fixed;
        min-width: 1550px;
        width: 100%;
        height: 172px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

Javascript:

    int_window_width = $(window).width();
    int_window_height = $(window).height();

    if ((int_window_width <= int_min_window_width && int_window_height >= int_min_window_height) || int_window_height <= int_min_window_height) { 
        $('html').css('overflow-y', 'scroll');
        $('#bottom_navigation').css('bottom', '');
        $('#bottom_navigation').css('margin-top', '');
        $('#bottom_navigation').css('position', 'relative');
    }

    if ((int_window_width >= int_min_window_width && int_window_height >= int_min_window_height) || int_window_height >= int_min_window_height) { 
        $('html').css('overflow-y', 'hidden');
        $('#bottom_navigation').css('position', 'absolute');
        $('#bottom_navigation').css('top', '');
        $('#bottom_navigation').css('bottom', '0');
        $('#bottom_navigation').css('margin-top', '');
    }

Answer 1

If you want the footer not to move when the document is scrolled, just use position:fixed; bottom: 0 position:fixed; bottom: 0 . IE6 doesn't support position:fixed so you'll need to apply a polyfill: http://www.css-101.org/fixed-positioning/05.php