Right-Floating div sinking below content

Here's another simple one, and I owe my good friend Nick for drawing my attention to it.

I have a right-floated div that should be aligned with the content on the left, but it's sinking below it, and pushing the div below it down. The div beneath is set to clear:both, but it still isn't working.


The easy solution: in your html code, place the right-floated div before the left-aligned content.

WRONG:

Here's my text<br />
With line breaks<br />
And so on. <br />
<div style="float:right; border: Solid 1px Black">
Hey, why am I down here?
</div>
<div style="clear:both; background-color:#0099FF">
I'm clearing both down here, what gives?
</div>

RIGHT:

<div style="float:right; border: Solid 1px Black">
Hey, why am I down here?
</div>
Here's my text<br />
With line breaks<br />
And so on. <br />
<div style="clear:both; background-color:#0099FF">
I'm clearing both down here, what gives?
</div>