CSS: text repeated outside of floating box <div>

One tedious problem I encounter when laying out my website was the strange behaviour of Internet Explorer (IE). Part of the text in the last box <div> was repeated outside the box. Firefox had no problem with it, but IE did.

The website has three columns each one box. First two float left and the last one floats right. In the last box there were three boxes stacked on top of each other (float top). From the last box the text was repeated underneath and all across the page outside of the box. Checking the code I could not find the problem.

Finally I found the reason and solution on internet. IE does not handle comments in your HTML (which I do a lot becaus it helps when programming) correctly.

When you have <!-- comments --> in your HTML, where the comment is larger than the width of the box, IE will repeat the last words from that box outside of the box. On top of that IE seems to be increasing the border with 3px all by itself.

The solution is to make the comments IE-proof by using the following comment tags:
<!--[if !IE]> comments <![endif]-->
IE will ignore the comments but you can still see them in your source.