jQuery: sticking footer needs window resize to work sometimes

Question

I'm using a simple jQuery plugin to sticking footer to the bottom of page, It works fine except when I put a table in the page: But when I resize the page, it gets fixed and footer sticks to the bottom. What's wrongwith it? Is it a CSS related problem or jQuery problem?

You can view the page without table here and page with table here.

It's the jQuery script for sticking footer the bottom of page:

$(document).ready(function () {
    positionFooter();

    $(window)
        .scroll(positionFooter)
        .resize(positionFooter);

    function positionFooter() {
        var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
        if (docHeight < $(window).height()) {
            var diff = $(window).height() - docHeight;
            if (!$("#sticky-footer-push").length > 0) {
                $("#footer").before('<div id="sticky-footer-push"></div>');
            }
            $("#sticky-footer-push").height(diff);
        }
    }
});

$(window).load(function () {
    $("#footer").stickyFooter();
});

// sticky footer plugin
(function ($) {
    var footer;

    $.fn.extend({
        stickyFooter: function (options) {
            footer = this;

            positionFooter();

            $(window)
                .scroll(positionFooter)
                .resize(positionFooter);

            function positionFooter() {
                var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                if (docHeight < $(window).height()) {
                    var diff = $(window).height() - docHeight;
                    if (!$("#sticky-footer-push").length > 0) {
                        $(footer).before('<div id="sticky-footer-push"></div>');
                    }
                    $("#sticky-footer-push").height(diff);
                }
            }
        }
    });
})(jQuery);

Answer 1

Add the following line just below the content div:

<div class="clear"></div>  

CSS:

.clear {
    clear:both;
}  

Your Code look like:

<div id="content">
    //HERE is your table
    <hr />
    <p>categories:</p>
</div>
<div class="clear"></div>