tags:

views:

223

answers:

2
+2  Q: 

Why does floated div sometimes inherit the margin of the following element?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

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

<body>
    <!-- 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>

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

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?

+1  A: 

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.

Mobbit  2009-09-16 15:46:32
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  2009-09-16 16:20:01
The strange thing is that chrome does it too, which uses a completely different rendering engine.
recursive  2009-09-16 16:26:44
IE8 renders it the same ans FF and Chrome. I'm pretty sure that's right.
PHLAK  2009-09-20 08:53:52
A: 

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.

corymathews  2009-09-16 16:00:09

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?