IE6 float <img>

Question

Sometimes in a floated div. IE6 does not display tags, however it does space the image correctly, and when you right click the image it gives correct details like size and file size. It just does not display the image:

<div style="float:left">
    <img src="one.gif" />
</div>
<div style="float:left">
    <img src="two.gif" />
</div>

These images are not displayed in IE6 but are displayed in Firefox/Safari/etc... What is the workaround?

Answer 1

One workaround is to use:

position: relative;
float: left;

Answer 2

It's called the "Peekaboo" bug. For more information see:

http://www.positioniseverything.net/explorer/peekaboo.html

The preferred method to fix this is to set the hasLayout property on the container to true

Answer 3

Try also floating the images, that will work!

div img {
   float:left;
}

By default images are display:inline; when they are in a floated div the div won't surround them. I believe this is the cause of the display bug.