Text content outside Div IE | Duplicate Characters Bug IE6

Hey Programmer,

Since you are on this page I know you are a web developer.  Cheers mate. I hope you have not spent one whole night awake and skipped dinner like me when you had a deadline and Microsoft Internet Explorer acted up. Especially the God Damned IE6 which should, IMHO, be banned and all users using that browser be taxed $1000 a year as Anti-Development tax. I am not exaggerating. We waste our time and electricity on fixing code for IE6 and that should be charged on users who don’t upgrade to Firefox or Opera or Chrome.

Anyway I wanted to share with you a peculiar error on IE6. You see parts of your content duplicated for no apparent reason. If it not aligned properly or breaking orientation its understandable…but showing some characters that make the end of the content is just outrageous.  Now see this example –

Notice the pink area in the footer. I have set the height of container divs and the two yellow/blue halves as same. The last three characters of my content in right half is being duplicated.  I know its like majic but who the hell likes this shitty magic?

How to recreate the bug?

<!--main div statrs here-->
</code>
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--sub div statrs here-->
<div style="height: 300px; width: 300px; background: none repeat scroll 0% 0% #ffccff; float: left;">
<!--left div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #ffff99; float: left;">This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div. This is content in left div.</div>
<!--left div endshere-->
<!--right div statrs here-->
<div style="height: 300px; width: 150px; background: none repeat scroll 0% 0% #00ffff; float: left;">
Right div text material here. Right div text material here. Right div text material here. Right div text material here.Right div text material here.Right div text material here.Right div text material here.</div>
<!--right div ends here-->
</div>
<!--sub div ends here-->
</div>
<!--main div ends here-->

How to fix this IE duplicate characters issue?

The fix is rather simple .. You got to limit the use of comments. Yeah…for some ‘God Knows Why’ reason using comments can lead to bugs in your HTML coding. From what I have read about this ..it seems IE6 has a margin buffer on right..that is if you have a box with 100px width you cannot have two boxes inside it with 50px width each.

1. You need to provide atleast 3px free space on right so that Microsoft guys might stick their thing there. (sorry for being rude)
2. Else you need to remove the comments. The comments seem to trigger the bug in most cases.

Either one of the fixes or their combination should work for you. If it does not you can curse me in the comments for wasting your time and continue your search on internet.