Mozilla, clearers, and dropped floats

I’ve come a cross a very strange bug in late Mozilla builds. It seems to have spread to the latest Camino nightlies as well as to Firefox RC 1, so this could cause major layout problems for *a lot* of sites that use floats and clearing elements. And many CSS driven layouts do.

This does not happen in Firefox 1.0 PR or Camino 0.8, so it must be something that’s been introduced recently. I’ll look into filing a bug report at Bugzilla, but I thought I’d post about it here to make others aware of potential problems.

The problem occurs when you have a layout where a cleared element is followed first by a floated element and then by a non-floated element that has been given a large margin, which is a very common way of making a two-column CSS-based layout.

Giving focus to a link (by tabbing to it) inside the non-floated element makes it drop below the floated element. Resizing the window makes it jump back up.

I’ve made a minimal testcase to let you check it out for yourself.

It is clearly (pun intended) connected to the clearing element before the float. Removing that element (or just the clear rule) fixes the problem.

Anyone else run into this? I haven’t seen or heard of this bug (it has to be a bug, right?) before. Like I said, I’ll look into submitting this to Bugzilla, but I don’t know the exact procedure for doing so.

Posted on November 3, 2004 in CSS, Browsers

• Previous post: Bring on the tables
• Next post: Who framed the web: Frames and usability