Internet Explorer 6 Rendering Problem

Here is the HTML that is demonstrated above.

    <div style="border: 1px solid black; background-color: white">
      <span style="color: red">Problem text</span>
      <img style="float: right" src="http://www.bradchoate.com/past/images/ezpop_shot.jpg" alt="EzPop"/>
      <div style="clear: right">
        Some more text (clearing the floating image)
      </div>
    </div>
      

If you're using Microsoft's Internet Explorer, chances are you won't be able to see the red text. The solutions below show the red text, but only after altering one of the 3 things that (when combined) cause this problem: floating an object, having a background on the container div, using another element that attempts to 'clear' the floated object, and not having sufficient content to extend below the floated object.

Note: if you do initially see the red text above, it may be due to your browser window being too narrow - - try widening the window and see if it disappears. Or, you may have already scrolled down the page until the red text scrolls out of view. If you do that and then scroll back up again, it will appear. Refresh the window to make it disappear again.

Update: As suggested by one reader, I've added 'Solution #5' below. It adds a 'float: left' style rule to the 'Problem Text' span. While this does seem to address the problem, it isn't the ideal solution, since I don't want to make that text float at all. I may wind up using this technique though to alleviate the rendering problem. The only other viable solution is to make sure I have enough content to extend past the image ('Solution #4').

Update 2: Added 'Solution #6', based on this.