IE6 Float Shrink-Wrapping Bug

In IE5-6/Win if a floated element without a set width has a non-floated child with hasLayout, the floated element's width will increase to its parent's width. You can see it in this first example where the floated element will be the full width of its parent element, even though it should be shrink-wrapped to the width of the text in the inner element.

One solution is to float the inner element.

Another is to give the inner element a set width.

A third is to give the outer element a set width.

A fourth is to just not trigger hasLayout on the innner element.

Perhaps I should mention that different browsers display the second example differently. Some show the floated element on its own line, but others show it on the same line as the inline text. That's a topic for another article, however.