More floating

BTW, just found this article that partly addresses the way that IE handles the cases I just described.

http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat


When a block follows a floated element, it should — as a block — ignore the float, but its contents should be displaced by the float: the text in a block-level element next to a left-floated element should flow to the right of the float, and then (if it is longer than the float) continue below the floated element.

This is indeed what happens in both IE and Firefox. However…


But if the block has “layout”, say, a width is set for some reasons, then the whole element is displaced by the float, as if it were a float itself, and so the text content does not wrap around the float anymore (it remains at its right, rectangularly shaped.)

This is what IE does wrongly. As noted here the whole element turns up to the right of a left-floated block, whereas in Firefox, if the non-floated block has an explicit width it turns up aligned with the left edge of the containing block with its text below the float.

Ok, end of today’s lesson on web development.


This entry was posted in Archive. Bookmark the permalink.

Comments are closed.