Which CSS bug is this? (margin-bottom, ie6 + ie7)

Question

In ie6 and ie7, the margin-bottom from the p is being applied to both the p AND the div just below it.

In other words, this code will apply a margin-bottom of 20px to both the p and the div in ie6 and ie7. No problems in any version of FF, Opera, Chrome/Safari or ie8.

<p style="margin-bottom: 20px;">Hello world!</p>
<div style="float: left; display: inline">
    Hello world, part deux.
</div>

Of course, removing the float from the div remedies the problem. Which ie/CSS bug is this, if any, and what should I search for to figure out how to fix it?

p.s. I cannot assign a width to the div, unfortunately.

Answer 1

I think you might be encountering the issue explained here. Unfortunately, part of the fix is to give the <div> a width and make it display: inline, things you either can't do or have already done. Maybe it will help you understand why it's happening though...

Answer 2

float: left will essentially cause your DIV container to be pushed to the top leftmost position possible within the document flow. In this case, since the previous P tag is not floated, the margin bottom is disregarded. This would have the desired effect, although not very clean code:

<p style="float: left; display: inline; margin-bottom: 20px;">Hello world!</p>
<div style="clear: left; float: left; display: inline">
    Hello world, part deux.
</div>

It would be ideal, however, to simply remove the float from your element and leave them as they were intended to be (block level elements):

<p style="margin-bottom: 20px;">Hello world!</p>
<div>Hello world, part deux.</div>

Perhaps I am missing the intended effect of these two containers in your case.