Bug 57223 – Negative margin-top with float creates an empty hole

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

[Tor Brekke Skjøtskift]

I created a positive top margin with a nested negative margin to push a floated element down. See test code: 

This leaves an empty hole where the float would have been without the negative margin.

<div style="margin:0 auto;width:800px;">
    <div style="float:left;margin-left:100px;margin-top:100px;width:700px;">
        <div style="float:left; margin-left:-100px; width:300px;padding:10px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </div>
        <div style="margin-top:-100px;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Tested on Chrome 10.0.648.151 and Safari 7533.16

[Tor Brekke Skjøtskift]

Created attachment 87125 [details]
Testcase

[Tor Brekke Skjøtskift]

Adding a empty div with float left before the div with the negative margin "solves" the problem.

++ <div style="float:left"></div>
<div style="margin-top:-100px;">

[Robert Hogan]

Looks fine to me on trunk now. Can you double check?

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 16.1, Chrome Canary 109 and Firefox Nightly 108 using attached test case and all browsers render this same. Thanks!

Marking this as "RESOLVED CONFIGURATION CHANGED", please reopen if it is reproducible with updated test case.