IE7 and the mixing of left and right floats

Now that I’ve completely cut out support for IE5 and IE6 from the template (no backup stylesheets—only a message that says “update already!”), I imagined my IE debugging would go much faster. But I still come across a head scratcher once in a while, even now, after years and years of this. Very strange that I’ve never seen this come up before…

The Issue:
I have a left floated element with a set width followed immediately by a right floated element whose width is allowed to vary. Because the width of the right element might not fit in the remaining space allowed by the left element, I’d normally put a clear: both on the right element.

This won’t work in IE7, as demonstrated here.

The Solution:
Unfloating the right element makes the width 100%, and all the containing bits align to the left, which is not what I want.

Instead, I unfloat the left element, apply a the clear: both to the right element and happiness ensues.