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

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...
    </div>
</div>

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.