Nesting floating DIV overflow problem

I had an issue with non-IE browsers where a floating div would oveflow its parent container.

Here's an example:

<div id="Container" style="background-color: Blue; width: 400px; padding: 10px;">
 <div id="Image" style="float: left;">
     <img src="http://www.google.com/images/logo.gif" />
 </div>
 Some text yada yada. Some more text yada dada.
</div>

One can solve this issue by simply adding a div that places a break after the floating div:

<div style="clear: both; font: 1px/1px sans-serif;">&nbsp;</div>

So in the end, it should look something like this:

<div id="Container" style="background-color: Blue; width: 400px; padding: 10px;">
 <div id="Image" style="float: left;">
     <img src="http://www.google.com/images/logo.gif" />
 </div>
 Some text yada yada. Some more text yada dada.
 <div style="clear: both; font: 1px/1px sans-serif;">&nbsp;</div>
</div>