8

EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc

First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg

Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

And CSS styles go like this:

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.

Any idea where could be the problem?

3

7 Answers 7

9

See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.

4
  • I cannot use padding-top: 10px; because the boxes already have background color and they already have padding: 10px so the content inside them looks better. Aug 7, 2009 at 17:19
  • 6
    Try adding a filler like &nbsp; to the clear div. I remember there was a bug in some earlier version that needed content like that.
    – Justin
    Aug 7, 2009 at 17:24
  • Adding &nbsp; solved the problem :) I just had to also add height: 0; to the .clear class. Aug 7, 2009 at 17:59
  • @Justin you should post this as an answer. This is the true solution plus the height:0; overflow:hidden;. +1 Mar 7, 2013 at 17:33
6

I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.

We've tested this, and only IE8 gets it wrong:

http://www.inventpartners.com/content/ie8_margin_top_bug

We also came up with 3 solutions.

4
  • Good investigation. The tricky topic is collapsed margins with clearing inside. All 3 top margins of not floating divs are collapsed in your example, so the top margin of the third one is not lost; it collapsed with the first one. W/o clear property, IE8's behavior is definitely correct, and other browsers agree. What adding clear property should do is not that clear. Check out Opera's behavior. BTW, you do not need two floats for your demonstration.
    – buti-oxa
    Aug 8, 2009 at 16:08
  • Interesting. I hadn't thought of it like that. IE8 is clearly being much stricter on margin collapse than gecko is. I've already previously written about another margin collapse issue with display: table in gecko which is rendered better (differently) in IE8 I suspect there will be quite a few more of these margin collapse inconsistencies which will be tripping up HTML developers in the coming months!
    – Matt Bradley
    Aug 10, 2009 at 8:47
  • Hi buti-oxa - I've added a footnote to my article detailing your analysis of this problem. Hope that's ok. Let me know if you want me to change it at all.
    – Matt Bradley
    Aug 10, 2009 at 8:55
  • Looks good. You are definitely right on MC continuing being a PITA in future.
    – buti-oxa
    Aug 10, 2009 at 18:50
1

Try closing your clear div.

<div class="clear"></div>
2
  • That's an issue, but not the issue. Adding the clear class to the box div will still clear anything prior.
    – Justin
    Aug 7, 2009 at 17:17
  • I just forgot to close it here, it's closed in the source code. I edited my post. Aug 7, 2009 at 17:18
1

I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.

2
  • Yes but I prefer to have minimal markup and use only so many divs that are absolutely necessary. This would just add another element with no semantic meaning that is not even necessary for styling. Aug 7, 2009 at 18:01
  • 1
    @Richard, I would say that <div class="clear">&nbsp;</div> is exactly the same. And personally I would choose the overflow solution, since the HTML looks better. But that's me.
    – dalizard
    Aug 7, 2009 at 20:50
1

enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.

    <div id="container">
        <div class="left">    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
        <div class="right">    
            <div class="box">        // box content right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

And the CSS

#container { width: 100%; overflow: hidden; }

(sorry, I left IE7 on my work machine for testing so I can't verify)

0
1

I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.

The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.

0

I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.