Take the 2-minute tour ×

Rather than trying to explain this, I'll give you the code:


    <style type="text/css">
        div#sidebar {
            background-color: yellow;
            float: left;
            width: 200px;

    <!-- insert something here to shift the top 
         of the sidebar by the top margin of the following div
    <div id="sidebar">
        background-color: yellow;<br />
        float: left; <br />            
        width: 200px;<br />

    <div style="margin-top: 200px;">div - margin-top: 200px;</div>

I'm testing this in FF and Chrome. Strangely, IE6 behaves in a way that I thought was correct. (?) I've reduced this to the minimum reproduction I can. Basically, if you put any text near the comment, the sidebar will move to the top of the document like I expect it to be. Otherwise the sidebar seems to inherit the top margin of the following div.

What's going on?

share|improve this question
Just thought I'd note that you're closing your last div with /h2. Also, you should self-close your br elements since you're using an XHTML Strict doctype. –  Eric Wendelin Sep 16 '09 at 15:50
Good catches. I've fixed this issues. –  recursive Sep 16 '09 at 15:56
Same with title being closed wrong. But it does not matter. –  corymathews Sep 16 '09 at 15:57
Fixed that one too. I like to do things correctly, despite my html here. Also it just distracts from the central point of the question, so I'll fix all problems pointed out. –  recursive Sep 16 '09 at 15:58

2 Answers 2

This behavior is in my opinion correct. Floated block elements are drawn at the same top margin. They have to be at the same level. A workaround would be to work with padding here.

share|improve this answer
It cannot be correct. If you were to replace <!- insert something ... with some text hi for example it would render completely different. It would render as IE7 is rendering it. Which would be the correct way in this case.... to think I just said IE was right.. –  corymathews Sep 16 '09 at 16:20
The strange thing is that chrome does it too, which uses a completely different rendering engine. –  recursive Sep 16 '09 at 16:26
IE8 renders it the same ans FF and Chrome. I'm pretty sure that's right. –  PHLAK Sep 20 '09 at 8:53

Not sure as to why a browser would render like this. I gave it a couple tries and found that Opera and FF both render it wrong. While IE7 render it correctly.

My knowledge of CSS would say that the div should float to the left and the second div just be 200px below the top basically ignoring that the first div even exists.

By adding a clear:left to the second div giving you

<div style="margin-top: 200px; clear:both;">div with big top margin</div>

It would render correctly in Opera and FF however now its wrong in IE7. IE7 adds extra space now. It displays it 200px below the box instead of from the top.

share|improve this answer

Your Answer


