Footer always at bottom of page no overlapping

Strait to the point:
This is what worked for me:

What worked: "Margin-bottom: -10px"

    footer
    {

        clear: both;
        margin-bottom: -10px; /*keep overlapping footer hidden*/
        height: 400px; /*height of footer: make it as big as wanted*/
    }

What failed:

    html {
        position: relative;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px; /* bottom = footer height */
    }
    footer {
        position: absolute;
        left: 0;
        bottom: 0; /* MAIN PROBLEM */
        height: 100px;
        width: 100%;
     }

This code I got from some site failed mainly because of the argument: "bottom: 0". In fact it would just stick and the bottom of the screen (good so far) even when I zoomed in, thus overlapping with the rest of the page (yak!!!)