August 4, 2008 will

Small div bug in Firefox?

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?

Update: Try the html yourself... divbug.html
Use Markdown for formatting
*Italic* **Bold** `inline code` Links to [Google](http://www.google.com) > This is a quote > ```python import this ```
your comment will be previewed here
gravatar
David Goodger

In IE 6.0.something on Win XP, the blue bars are each the height of one line of text, much larger than 8px. So the text doesn't overlap, but only because IE has another bug altogether!

gravatar
Karl Norby

Safari (v3.1.2) does the same as Firefox.

gravatar
Chris Lambacher

IE 7.0 behaves like the description of IE 6.0 given by David.

gravatar
Ankit Garg

Actually IE expands a div to the height of the div or the text size of text in the div whichever is greater...