Clearing Problem

If you have an element set to float:right; and you follow it with another element set to clear:right; float:right; and then follow those first two elements with a third element set to float:left;, the third element will not float next to the first element, even though it is not actually being cleared.

This bug is also present when the directions are reversed.

(ppknote: Strictly speaking this is a bug in Explorer, but I find Dan's reasoning compelling enough to publish his report unaltered. Besides, other web developers will conceivably run across this behaviour in Safari, Opera, or Firefox. Be sure to click the "real world example" link on the test page.)

Test page Workaround is not included
Reported by: Dan Richman.

Mozilla, Opera, Safari | Reported on 1 February 2007.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.




Search reports by browser:

Atom RSS

Comments

(Add your own)

1 Posted by Chris on 1 February 2007 | Permalink

On the Test Page, it's normal for the paragraph to rise to the top as it is not being floated. Only when clear:both is applied does it drop to the bottom. The floats are floating around the paragraph.

2 Posted by Mordechai on 13 March 2007 | Permalink

A less than perfect workaround would be to wrap the image and its caption in a container. It that case, and probably most others, there would no loss of semantic value (and maybe even a slight gain).

3 Posted by David Kilzer on 15 March 2007 | Permalink

Filed as Bug 12114 for WebKit.

http://bugs.webkit.org/show_bug.cgi?id=12114

4 Posted by Dave B on 20 March 2007 | Permalink

Technically, this is not a bug according to W3C spec:

http://www.w3.org/TR/CSS21/visuren.html#float-position

This was noted in another one of the webkit bugs,

http://bugs.webkit.org/show_bug.cgi?id=12114