IE6 Float Shrink-Wrapping Bug

posted by Kravvitz at 5:18 PM on Nov. 16th, 2009

Categories: CSS, Browsers, MS Edge & IE, Bugs 2 comments

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.

floated element (with width:auto)
element with hasLayout but no set width

One solution is to float the inner element.

floated element (with width:auto)
floated element with hasLayout but no set width

Another is to give the inner element a set width.

floated element (with width:auto)
element with hasLayout and a set width

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

floated element (with a set width)
element with hasLayout but no set width

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

floated element (with width:auto)
element without hasLayout

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.

#1 google sketchup 6:48 AM on Jan. 22nd, 2011

Pretty insightful post. Never thought that it was this simple after all. I had spent a good deal of my time looking for someone to explain this subject clearly and you¡¯re the only one that ever did that. Kudos to you! Keep it up

#2 Anthony 11:28 PM on Feb. 10th, 2012

This is the cool and wonderful read. The blog is created in a way it is so easy to read and understand. I AM a lover of your web site. Many thanks sharing these details.

Login or Register to post a comment