Webkit phantom float bug

I recently found a strange webkit bug when I used a negative top margin to position a floated element.

I float an element to the left and gives the outer wrapper element a top margin of ex. 100px. Then I give the inner child wrapper a negative margin-top of 100px to push the floated element down. In most modern browsers this works, but in Chrome and Safari we can see a hole where the floated element would have been without the negative margins. The floated element further down looks fine.

[example] (test with a webkit browser)

The “fix” is a strange one. I insert an empty floated div before the inner child wrapper and the phantom float disappears.


About Tor Brekke Skjøtskift

Senior Webdesigner Media Norge Digital
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>