ansaurus

Question

Answer 1

+1 A:

I'm not sure I completely understand the question, but I'll take a stab at it:

I don't believe that there is a time where a float will collapse a margin. I've looked at your code and I don't see any margin set in the css that then is 'collapsed' when I view it in a browser (I'm using Safari).

Here's my thoughts:

In the first part of your example, you have the normal flow div before the floated div. The floated div will just be rendered below the normal flow div.

In the second part of your example you have the floatedRect divs above the normal flow divs. That's when you see the text move to the right. This is not affecting the margin of the text divs or collapsing the margins. It is just allowing the text to 'float' around the floatedRect divs. I've changed your code to illustrate:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>Inheritance Tests</title>
    <style>
    * { 
        margin: 0px ;
        padding: 0px ;

        font-family: courier ;
        font-size: small ;
    }

    .test4 {width: 400px; height: 100px; border-style: solid; border-width: 1px;}
    .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; margin:10px; }

        .floatedRect {
            width: 50px ;
            height: 50px ;
            float: left ;
            background-color: #9cf ;
        }

        .text {
            margin: 10px; border:1px solid red; position:relative; z-index:1;
        }
    </style>
</head>
<body>


    <div class="test5">
            Floated
    </div>

     <div class="test4">
            Normal Flow
    </div>

    <div style="margin-top: 100px">
        Has a top margin
    </div>

    <div style="clear: both">
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
    </div>
</body>

Notice that the text divs have a 10px margin still, but the text has been pushed to the right by the floatedRect divs.

Hope that helps.

Ken Earley 2009-11-10 03:46:51

Answer 2

A:

Maybe chapter 8.3.1 Collapsing margins in the CSS 2.1 Specification can be of help?

anddoutoi 2009-11-10 09:46:36

ansaurus

tags:

views:

answers:

Floats and Margin Collapse

related questions