css - 上のdivにフローティングがあるときにフッターを下げる方法は?

Question

その上のページにどれだけのコンテンツがあるかに関係なく、フッターをページの一番下に移動する必要があります。だから私はインターネットでいくつかの検索を行い、このサイトに従って1つの解決策を見つけました：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

ただし、「float:left」をコンテンツ div に適用するまでは、すべて正常に機能します。フッターは最下部になく、途中でぶつかってしまいました。私の質問は、上の div にフローティングがあるときにフッターを下に保つ方法は?

私の例については、この jsfiddle here を参照してください。

http://jsfiddle.net/mEuke/5/

またはここにコード：

<style type="text/css">
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>

<div id="container">
   <div id="header"></div>
   <div id="body">

   <div id="test" style="float:left">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
   </div>   
      </div>


   <div id="footer"></div>
</div>