9

IE6, often, but not always, sees its floats

Consider this bit of markup:

<div style="width: 500px; background: #ccc; border: 4px solid #000;"><img style="float: left;" src="pics/red.gif" width="104" height="133" alt=""><img style="float: left;" src="pics/green.gif" width="200" height="50" alt=""></div>

If you are seeing this in a good modern browser like Firefox or Safari, you will see how the parent container (the one with the black border), appears blind to its floats, does not grow height to cover its floated children:

Fig 1.

However, it looks like this in IE6:
how IE6 covers floated children

In fig. 1 above, the explicit width - curiously - is a trigger for IE6 to grow height! If you are reluctant to give a width to a parent (for fluid design reasons) and simply leave it out, you might well see IE6 render fig. 1 in the same way other browsers do, namely as a parent not extending height to cover its floats.

A DIV is auto wide by default, not a *specific* width. This fact is not enough to trigger IE6's float-covering behaviour. No more than an explicit width is needed for IE6 to grow height. In Fig 1. the width is explicitly set at 500px for the container. There is no need for clearing divs or to worry about other techniques. Unlike in other modern browsers where these sterner measures are needed (as we have seen in the last couple of pages)

I have made an appendix where you can see for yourself the effect of having and not having a width on the height growing question. Use IE6 to view this appendix.

I will also mention here that giving the parent an explicit height, even of 1px also triggers IE6's float covering behaviour, a fact discovered a while back by keen students of IE. So this is something worth remembering if you do not want to have an explicit width or a clearing div. ('overflow: hidden' or 'overflow: auto;' will not work to trigger IE6 to grow height)

There are still a few important things we have not touched upon yet. Given the blindness of the parent to its floated children in respect to 'housing' (growing height to accommodate them), what other things do the parents provide or not provide? What about the text colour? What about the background? To some issues on this we next turn.

9