the Office Muscle

Wow, this has been a stinking pain! I was trying to do something like the following:

<div id="container">
<div id="float_right">
</div>
</div>

When the float_right div had content that made its height greater than the container div, Firefox would not auto-encase it, but it would overflow the container div. IE, auto-encases.

Well, after struggling with this problem for some time -- and realizing that I've run into this problem before, I ran into a good forum post.

The key for Firefox is to put an element after the floated div, but before the end of the container div that has the CSS clear:both tag. So, my solution was something like this:

<div id="container">
<div id="float_right">
</div>
<br style="clear:both;" />
</div>

And it worked like a charm. Happy day.