Problem mit sticky footer (footer wandert nach oben)

    Hallo!
    Mein Problem: Der footer sitzt zwar am unteren Rand. Wenn ich aber das Fenster verkleinere und nach oben schiebe, wandert der footer mit nach oben. WARUM? Ich habe u.a. die äussere "Container-Box" auf position: relative gesetzt und footer position: absolute; bottom: 0.

    Hier mein Code (bitte das Layout nicht weiter beachten!! Die Seite ist nur eine ÜBUNGSSEITE!). Wäre toll, wenn sich jemand den Code ansehen und den Fehler finden könnte! DANKE schon mal!

    <!doctype html>
    <html>
    <head>
    <title>Sticky footer</title>

    <style type="text/css">

    body, html { height: 100%;
    }

    * {margin: 0; padding: 0;}

    #wrapper { position: relative;
    margin: 0 auto;
    min-height: 100%;
    height: 100%; /* Für IE */
    background-color: orange;}

    #header { height: 200px;
    border: 2px solid blue;
    margin-bottom: 20px;
    }

    #content { margin: 0 auto;
    width: 960px;
    /*height: 100%;
    background-color: silver;
    }


    #column1 { border: dotted 3px red;
    background-color: #fff;
    float: left;
    width: 43%;
    padding: 8px;
    }

    #spacer { backrground-color: orange;
    float: left;
    border: 1px solid;
    background-color: orange;
    width: 8%;}

    #column2 { border: dotted 3px green;
    background-color: #fff;
    float: left;
    width: 43%;
    padding: 8px;
    }

    #footer { position: absolute;
    bottom:0;
    background-color: blue;
    width: 100%;
    }

    </style>

    </head>
    <body>
    <div id="wrapper">

    <div id="content">

    <div id="header">

    <p>HEADER</p>

    </div>

    <div id="text">
    <p id="column1">Text paragraph left. Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.</p>
    <div id="spacer">SPACER</div>
    <p id="column2">Text paragraph right.</p>
    </div>


    </div> <!---- End #content ---->

    <div id="footer">

    <p>FOOTER</p>

    </div> <!---- End #footer ---->

    </div> <!---- End #wrapper ---->
    </body>
    </html>