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 whis­pered insin­u­a­tion of a poten­tial CSS ren­der­ing bug in the Holy Firefox inspired a ston­ing from the com­mu­ni­ty. Now that many oth­ers have con­firmed the exis­tance of this bug I feel vin­ci­dat­ed, but I’m still no clos­er to fix­ing the crit­i­cal lay­out prob­lem it caus­es on sev­er­al of my sites.

Designorati​.com, for instance, suf­fers from the float drop bug. In Mozilla-based browsers–Firefox, Flock, Camino, etc.–the right side­bar col­umn can drop down below the main body col­umn. It hap­pens ran­dom­ly; depend­ing upon Firefox’s tem­per­me­nt and the phase of the moon over Mozilla HQ, the columns may ren­der cor­rect­ly in 40–60% of the page loads. It’s been that way since September 2006, when I first redesigned Designorati​.com with two float­ing DIV columns.

That’s the meat of the float drop bug, you see. Firefox ran­dom­ly ren­ders two side-by-side float­ed DIVs stacked. The first DIV in the page code ren­ders in its cor­rect place while the sec­ond, hor­i­zon­tal­ly in the cor­rect place (e.g. float­ed right if set to Float: right, float­ed left if Float: left), but ver­ti­cal­ly the sec­ond DIV does­n’t begin until the first has end­ed. To the best of my knowl­edge and abil­i­ty I have been unable to dis­cern a rea­son for this behav­ior, a com­mon fac­tor, that insti­gates the bug.

GurusUnleashed​.com is anoth­er example.

[incom­plete, got dis­tract­ed try­ing to hack my stylesheet to deal with yet anoth­er instance of Firefox’s float drop bug.]