Bug 78948 – Floated element is overwritten by inline elements.

• Component: CSS
• Status: RESOLVED DUPLICATE

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>

[Shane Stephens]

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.

[Shane Stephens]

Apparently this is an issue on Windows 7, however.

[Shezan Baig]

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

[Shezan Baig]

*** This bug has been marked as a duplicate of bug 53239 ***