IE6-/Win: Indentation problem with inline content following a float with margin

This is floated right with a left margin of 50px

This is inline content following the float Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam wisi pede, tincidunt in, vehicula a, volutpat in, nibh. Fusce tempor euismod metus. Ut diam elit, volutpat ac, tincidunt at, fermentum non, purus. Nullam id lorem eget arcu pulvinar consectetuer. Sed vitae urna. Quisque ultrices, risus ac vestibulum tempor, ipsum sapien suscipit neque, ac lacinia eros dolor id wisi. Nam nec nibh vel orci gravida pretium. Integer pretium dolor eu enim. Nulla sed justo ut est vestibulum nonummy. Suspendisse dui. Nullam eros. Praesent sit amet pede.

This is floated right with a left margin of 50px, and display:inline

This is floated left with a right margin of 50px

This is floated left with a right margin of 50px, and display:inline

IE6-/Win adds a sort of indentation to the inline content next to a left/right float having right/left margin. The first line box beside the float is reduced (on the opposite side of the float) of an amount equal to the margin of the float. This looks like an indentation (on the left) for a right float, and an extra space at the end of the line (on the right), for a left float. The problem is fixed with display:inline on the float.

If there is something in the container before the float, or if the content following the float is wrapped in a block element the problem does not occurr.

This is floated right with a left margin of 50px

This is content following the float, wrapped in a P Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam wisi pede, tincidunt in, vehicula a, volutpat in, nibh. Fusce tempor euismod metus. Ut diam elit, volutpat ac, tincidunt at, fermentum non, purus. Nullam id lorem eget arcu pulvinar consectetuer. Sed vitae urna. Quisque ultrices, risus ac vestibulum tempor, ipsum sapien suscipit neque, ac lacinia eros dolor id wisi. Nam nec nibh vel orci gravida pretium. Integer pretium dolor eu enim. Nulla sed justo ut est vestibulum nonummy. Suspendisse dui. Nullam eros. Praesent sit amet pede.

This is inline content preceding the float Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam wisi pede, tincidunt in, vehicula a, volutpat in, nibh. Fusce tempor euismod metus. Ut diam elit, volutpat ac, tincidunt at, fermentum non, purus. Nullam id lorem eget arcu pulvinar consectetuer.

This is floated right with a left margin of 50px

Original reference: Floats, Margins and IE

CSS tests home