Take for example a recent update I made to a client’s home page. The two new buttons at the bottom of the page looked ok in all browsers except IE6 – where the last character – the “s” was repeated on the line below

Why does this occur?

As the IE bug bible states, the bug is triggered

“…only when the final float fills the container to the right edge, or to within less than 3px away from it. This is because IE6/win seems to have a weird 3px “bumper” margin on the right side of that last left float.”

Explorer 6 Duplicate Characters Bug

In my case, the two floated elements fitted the parent exactly.

Luckily I have encountered this rare creature before. To solve the problem, I quickly added 3 extra pixels width to the parent container and the bug disappeared.

I can only hope that you manage to see it some day, in the wild, before it becomes extinct. Then you, too, will have something to tell your grand children about some day.

Suddenly you layout does not look so great in Internet Explorer. For some reason columns are wider. In some cases the column width increases so much that the entire layout breaks and the column drops below the rest of the content. Your confidence is shattered. You curse CSS and think about table-based layouts. At least they “work” in IE.

Here is a possible solution.