How can I prevent a floated div from inheriting his sibling's margin-top?

Question

I have some html code that look like this sample here :

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="margin-top: 20px; Background-color: Green;">Bravo</div>
  </body>
</html>

What I'd like to achieve is have the A div in the upper right corner and the B div aligned on the left 20 pixels from the top of the page. As you can see below, it does exactly what I want in IE8, but it doesn't quite works in Chrome and Firefox.

enter image description here

Because it's often the case, I suppose Chrome and FF are right to render it this way and IE8 is not following the standard. So my question is how can I get the desired result (What IE does in the SS) across all browser?

EDIT1&2: I edited the screenshot to show that I really want the Bravo div to be on the left of the Alpha div but 20px lower and not under it like it would if I simply add a clear: right on Bravo.

Thanks

As per the edit: That seems to be exactly contradictory to what your original question stated. — animuson, Nov 16 '11 at 15:42
I'm sorry, I think my question is clear and simple. How do I achieve the IE rendering (look at the screenshot) in the other browsers? — Mathieu Pagé, Nov 16 '11 at 15:49

Jarno Argillander · Accepted Answer · 2011-11-16T16:07:24.483

1

EDIT
Answer to the new question:

<div id="A" style="float:right; background-color: Red; margin-top: -5px;">Alpha</div>
<div id="B" style="margin-top: 20px; background-color: Green;">Bravo</div>

ORIGINAL
(The question author originally asked this and later changed the question...)

Add clear: right; into B div's style. Optionally use clear: both;. And wrap div A into a wrapper div like this:

<div id="wrapper" style="overflow: hidden;">
    <div id="A" style="float:right; background-color: Red;">Alpha</div>
</div>
<div id="B" style="margin-top: 50px; background-color: Green; clear: right;">Bravo</div>

edited Nov 16 '11 at 16:07

answered Nov 16 '11 at 15:30

Jarno Argillander

5,885
2
31
33

I thought of this but it creates an odd behavior where the green box is attached to the red box: http://jsfiddle.net/zP4H5/3/ - It appears to be ignoring the margin-top? – animuson Nov 16 '11 at 15:33
Try adding `margin-bottom: 50px;` to the A div and remove `margin-top: 50px;` from the B div. How is that? – Jarno Argillander Nov 16 '11 at 15:34
Floating B and giving it width will give you the desired effect. – Alex Nov 16 '11 at 15:34
1

Here's info why the margin-top doesn't work with the float: http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both – Jarno Argillander Nov 16 '11 at 15:35
Solution posted to the new question – Jarno Argillander Nov 16 '11 at 16:10
@JarnoArgillander : Thanks, your edited answer seems to work. I'm sorry I changed the question. I probably should have started another question instead. – Mathieu Pagé Nov 16 '11 at 16:13

score 0 · Answer 2 · answered Nov 16 '11 at 15:34

0

Try this:

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="float:right; margin-top: 50px; Background-color: Green; clear:right; width:100%;">Bravo</div>
  </body>
</html>

Added:

float:right; clear:right; and width:100%; to #B

See it in action - http://jsfiddle.net/SHubq/

answered Nov 16 '11 at 15:34

Alex

8,875
2
27
44

I've edited my SS and question to specify that I really need Alpha to be floated on the right of Bravo. I'm sorry that I did not do so in my original question. – Mathieu Pagé Nov 16 '11 at 15:43

Jean-Charles · Answer 3 · 2011-11-16T15:45:44.303

0

You have to add the clear CSS rule.

add between your two divs

<div style="clear: both" />. (Note : in your case, just clear: right works)

or

add clear: both in the div id="B" style. (Note : in your case, just clear: right works)

Edit : See the two cases in this fiddle http://jsfiddle.net/dyGyu/

edited Nov 16 '11 at 15:45

answered Nov 16 '11 at 15:35

Jean-Charles

1,690
17
28

score 0 · Answer 4 · answered Nov 16 '11 at 15:35

Add a clear property onto b's div style, use the property that is most appropriate to the site in question.

Such as both so you get nothing either side.

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red; ">Alpha</div>
    <div id="B" style="margin-top: 50px; Background-color: Green; clear: both;">Bravo</div>
  </body>
</html>

How can I prevent a floated div from inheriting his sibling's margin-top?

4 Answers4