IE6 invisible text in 7 lines HTML, is there a fix?

Question

It took me forever to reduce the problem to this. I cannot express the amount of frustration I'm experiencing, and if I did, it would not be suitable for any website. Ever. Here is the HTML code that is causing me epic pain:

<div style="padding: 5px; background: #EEE">
 This text is invisible. Remove either padding or background to see this.  
 <div>
  <div style="float: left;">left</div>
  <div style="clear: both;"></div>
 </div>
</div>

The text is invisible, unless you highlite it or drag a window over top of it, or something crazy like that.

This problem is resolved if you remove padding or remove the background.

How can I fix this?

Answer 1

You’ve been bitten by Peek-a-boo.

From that link, your options are:

1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.
3. Give div#floatholder hasLayout (now the preferred method)

Answer 2

Looks like classic hasLayout problem. Add a width to your outer-most div or try any of the other methods described here.