ansaurus

Question

Float and margin

Answer 1

A:

It works fine when you:

#content {
    margin-top: 20px;
    clear: right;
}

petsagouris 2010-09-22 14:25:51

I know how to fix it but I'm intrested in the cause of this. Thanks.

2010-09-22 14:37:16

the cause is because you aren't clearing the floated element.

Ross 2010-09-22 14:47:07

Answer 2

+1 A:

it doesn't, strictly. (the margin isn't applied to #right) floating takes the element out of the flow of the document.

add clear:right to #content

and floated elements ~should~ have a width.

Ross 2010-09-22 14:26:30

Thanks, I know that floating takes the element out of the flow. Because of this, my floating element should be on the top right, without margin.

2010-09-22 14:32:31

ah, the why rather than the how. frankly i couldn't give you a concise definition, im sure someone else can. the floated element does not have the margin. it visually may appear to, but thats because the floated element appears after non-floated content has been displayed or until the float is cleared. thats my understanding at least. you are seeing the margin of #content, and then after #content, #right is output, for lack of a better word.

Ross 2010-09-22 14:50:06

the why is more about the way that block versus inline-block versus inline works.

drachenstern 2010-09-22 15:59:27

@drachenstem: Thanks. Can you explain me a little bit more, please? I was expecting that the #rightelement was at 0px to top and the #content was at 20px to top.

2010-09-23 07:06:19

Answer 3

A:

Two things are missing: 1) clear:right; within #content. 2) widths need to be specified so that you are able to apply clear:right without the div's stacking.

<html>
    <head>
        <title></title>
        <style type="text/css">
            *
            {
                margin:0px;
                padding:0px;
            }
            #right
            {
                float:right;
                width:24%;
                border:1px solid red;
            }
            #content
            {
                margin-top:20px;
                width:74%;
                clear: right;
                border:1px solid aboue;
            }
        </style>
    </head>
    <body>
        <div id="right">a</div>
        <div id="content">b</div>
        <div style="clear:both;"></div>
    </body>
</html>

I've added the borders so it is easier to view.

Jon Harding 2010-09-22 14:40:39

Thank you very much. I'd need to know why, in my version, the floating elements has the margin-top, assigned to #content.

2010-09-22 14:47:36

I guess I'm not following because your <styles> specifically add a margin-top:20px to #content

Jon Harding 2010-09-22 14:59:17

@Jon Harding ~ the margin-top isn't applied to the `#right` element. He wants to know why the `#right` element has a margin-top. The reason is because of `block` vs `inline-block` vs `inline`

drachenstern 2010-09-22 16:00:31

ansaurus

tags:

views:

answers:

Float and margin

related questions