Introduction
Many time in my sites I have a few divs floating left to make up an image gallery or something like that and then I have text below the gallery. Usually I just add a div with style "clear:both;width:100%;height:0px;" and then the text is nicely below the floated divs. I realized that this div doesn't stay 0px high in IE6, it has a minimum value of around 8 pixels, and some times this can't happen due to some layout issue where the text needs to be in that exact spot and not 8px down.
What really happens
Now in most browsers the div is just placed where it's supposed to without anything inside and 0px high, but IE6, the naughty bugger that it is, decides that we are not allowed to add nothing inside a div and adds something inside it for us, an empty text element and it forces the div to be as high as this text element. Thus there are two ways to fix this little issue.
Fixing the problem
Like I said, there are two things that can be done here, and these two are:
1. Setting the line height to 0px
You can set the line height of the div to 0px, thus making the text element inside 0px too ...
<div style='width:100px;height:0px;line-height:0px;'></div>
2. Commenting out the empty text element
Like the sub-heading suggests you can simply comment out the empty text that IE6 adds inside the div, although I actually think that IE6 thinks that there is something inside the div when the comment part is added like follows, and doesn't even add the empty text element:
<div style='width:100%;height:0px;clear:both;'><!-- --></div>
Conclusion
Although IEs give us problems many-a-times there are ways around it ... this is just one of the many ways we can trick IE6 into doing what we want it to do ... So remember that when nothing is inside a div, that IE6 adds an empty text element inside that div and that you can fix this by either making the line-height 0 or by adding an HTML comment inside the div ...
This page was published on It was last revised on