When writing the image wrapping script, I came across a difference between Firefox and Opera. Basically, when there are small floated divs in a vertical stack, the text to the right will be aligned to the topmost div in Firefox, even if the divs underneath extend farther than the topmost div. Opera handles this situation better and places the text after the maximum extents of the floated divs. Take the following HTML:

<div style="float:left;clear:left;width:100;height:8px;background-color:#55f;" ></div>

<div style="float:left;clear:left;width:120;height:8px;background-color:#66f;" ></div>

<div style="float:left;clear:left;width:140;height:8px;background-color:#77f;" ></div>

<div style="float:left;clear:left;width:160;height:8px;background-color:#88f;" ></div>

<p>This text should not be displayed over the blue bars...</p>

Since the text is greater than 8px in height, I would expect it to push the text inside the tag farther to the right. Instead, what happens is that the div is rendered underneath the text. Here is what it looks like in Firefox 3:

And here is what it looks like in Opera:

I haven't tried it on Internet Explorer as yet, because I'm a Linux fan-boy and I can't be bothered booting in to Vista. So, dear lazyweb, is this a documented bug?