Sticky footer + floating elements

One more question about the sticky footer css... lets say i have the following markup:

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

As you can see in this fiddle, with the given css, sticky footer works like a charm.
It stays at the bottom of the page if div#body has only a few contents, and is pushed out of screen at the bottom when there are lots of contents.

My problem now is when i try to put 2 floating divs(1 left - 1 right) in the div#body. Then the footer is at the bottom of the screen but is not pushed down when there are a lot of contents (You can see this fiddle)

How can i make make it work? i've tried 1000 tricks found on the web, still not able to understand how to make it work.

Thanks in advance.

Solution

Try:

#body {
   overflow:hidden;
}

EDIT: This way you won't need an extra element to clear the floats.