Simple example: Chrome and Safari - The paragraph content overwrites the top of 2nd floated element. Firefox, Opera and IE do not. <div style="display:block; margin:0; margin-left:auto; margin-right:auto; padding:0; width:300px; height:250px; border:1px solid blue; font-family:Arial; font-size:9pt;"> <div style="display:block; float:right; margin:0; padding:0; width:10px; height:150px; background-color:red;"></div> <div style="display:block; float:right; clear:right; margin:0; padding:0; width:150px; height:100px; background-color:yellow;"></div> <p style="padding:0; margin:0; margin-top:5px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> <p style="padding:0; margin:0; margin-top:5px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> <p style="padding:0; margin:0; margin-top:5px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> <p style="padding:0; margin:0; margin-top:5px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> <p style="padding:0; margin:0; margin-top:5px;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> </div>
Working for me in Chrome 17.0.963.79, Chrome 19.0.1076.0 canary, Safari Version 5.1.3 (7534.53.10), WebKit nightly (r110761), all on Mac OS X Version 10.7.3.
Apparently this is an issue on Windows 7, however.
This is actually an issue on all platforms, but the test data may need to be modified slightly on other platforms to account for different fonts etc. It seems to be a duplicate of bug 53239
*** This bug has been marked as a duplicate of bug 53239 ***