IE box model + float = duplicated text

The problem

If you are floating elements within a box (in this case <label>s within a <fieldset>), Win/IE6 appears to have a box model issue (even when rendering in “standards mode”) and will duplicate a portion of your text onto a new line:

A screenshot of the issue taken in Win/IE 6

In this example, the width of the conatining <fieldset> is set to 410px. Padding is set to 0px, so the box has an inner width of 410px. The <label>s are each set to 200px wide, with a right-hand margin of 5px. Floating two <label>s next to one another would yield a width of 410px (200 + 5 + 200 + 5 = 410), thereby snuggly fitting within the container box.

Note: if the elements you are floating do not reach the other side of the container, there is no problem (see the first <fieldset> in the live demo or above).

The solution

Dropping the width or margin of the <label>s or increasing the width of the <fieldset> seems to get rid of the issue. Oddly enough, in the above example, the issue disappears when the <label>s reach 196px wide, meaning that that Win/IE6 will keep the display issue until the floated elements are at least 8px (410 - 196 - 5 - 196 - 5 = 8) away from the right-hand side of the container.