Firefox Float Drop Bug, Oh How I Hate Thee
I’ve been wrestling with the well-publicized Firefox float drop bug for more than 2 years now—since before it was a well-publicized bug, since a time when even a whispered insinuation of a potential CSS rendering bug in the Holy Firefox inspired a stoning from the community. Now that many others have confirmed the existance of this bug I feel vincidated, but I’m still no closer to fixing the critical layout problem it causes on several of my sites.
Designorati.com, for instance, suffers from the float drop bug. In Mozilla-based browsers—Firefox, Flock, Camino, etc.—the right sidebar column can drop down below the main body column. It happens randomly; depending upon Firefox’s temperment and the phase of the moon over Mozilla HQ, the columns may render correctly in 40-60% of the page loads. It’s been that way since September 2006, when I first redesigned Designorati.com with two floating DIV columns.
That’s the meat of the float drop bug, you see. Firefox randomly renders two side-by-side floated DIVs stacked. The first DIV in the page code renders in its correct place while the second, horizontally in the correct place (e.g. floated right if set to Float: right, floated left if Float: left), but vertically the second DIV doesn’t begin until the first has ended. To the best of my knowledge and ability I have been unable to discern a reason for this behavior, a common factor, that instigates the bug.
GurusUnleashed.com is another example.[incomplete, got distracted trying to hack my stylesheet to deal with yet another instance of Firefox’s float drop bug.]