IE 7 quirks: floats and margins, here we go again

Bug Screenshot We’ve been introduced with the latest Internet Explorer few weeks ago and some quirks have been explained already. In this article, we’re dealing with a single (but pretty nasty) bug – neglected bottom margin set at the floating child element.

The following markup:

<div class="wrapper">
    <div class="inner">
    ... some content goes here...

and the corresponding CSS rules:

.wrapper { float: left; }
.inner { float: left; margin-bottom: 30px; }

should make .wrapper 30 pixels higher than .inner, right?

In IE 7 this is not a case. Instead, to achieve the same effect, one should set bottom padding at the parent element:

.wrapper { float: left; padding-bottom: 30px; }
.inner { float: left; }

Yes, they fixed float doubled margin bug, but brought us another one of the same sort. See demo page.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?