What the? What just happened? What's with the gaps beside the first two paragraphs? (If you don't see any, that's because your browser correctly implements the standard.)
Well, that's just it you see. I told IE to float the list. The DIV that follows it is not floated, so it should be put on the page exactly as if the float were not in the page. Then the float should push the words - just the words, not the whole DIV - to the side, so that they flow around the edge of the list. IE gets this right.
However, if you now specify a width or height on the DIV (or as I did here, to the first two paragraphs inside the div), suddenly the text does not flow properly. IE suddenly moves the left edge of the DIV until it is on the right of the list. It also takes any measurements relating to the space that is not used by the list. But, you will remember, I said it should be laid out assuming that the float is not there. IE ignores this. This can cause major design problems. Why? Because the text can no longer flow around the list. It is all pushed to the side, even though it doesn't need to be, leaving a gap. If you make the page narrow enough, IE pushes the entire DIV below the float, even though it should only move the elements that need the extra space.
If I hadn't included the XML conformance tag (and therefore made IE use what it considers to be a standards compliant response), it would be even worse; it would make the width of the div following the float be the correct width (as if the float was not there), but then it would be pushed over so that its left edge lined up with the right edge of the float. This would produce a horizontal scrollbar, and would force you to scroll the width of the float across to the right in order to read the page content. And it would still suffer from the padding problem.
If IE followed the standard, you would be able to choose. Use padding to push the edge of the elements over (so it acts like IE), or do not specify padding, and have it produce the wrap-around effect. I applied padding to the first couple of the paragraphs, and you can see what happened, it left a gap. It shouldn't, because the padding should be taken out of the space behind the float (padding is most useful in the space after the float, but to allow a fluid design, it must be applied to all paragraphs), but of course, IE takes its measurements from the wrong side of the floating list, so the padding gets added on to the pseudo margin created by the float. Thanks IE, yet one more bit of flexibility you don't seem to think that we need.
This is a deliberate part of Microsoft's float model. It is not an accidental bug. Sure, there are loads of bugs in IE relating to floats, many of them cause content to be distorted or removed entirely from view. But I repeat, this is not a bug. It is a deliberate decision not to do it correctly, despite the fact that floats have been part of CSS since before IE 4.
Demo: This whole page should not have any odd gaps. The text should just flow around the list of links.
Workaround: There are several workarounds that offer varying degrees of success. You can try applying margins or padding to the elements that follow the float, you can avoid using width or height on elements following the floats, or just live with the erroneous rendering.
Move on to the next page in this article > >