Why does the floated span drop?

Question

This code will work fine in Webkit (chrome) but not in firefox, where the second span will drop, do you know why?

<div id="sbar">
    <span id="status">Some Text</span>
    <span id="mlog" style="float: right;">Some text in the right</span>
</div>

score 5 · Accepted Answer · answered Mar 04 '09 at 18:30

5

Try reversing the two spans.

<div id="sbar">
    <span id="mlog" style="float: right;">Some text in the right</span>
    <span id="status">Some Text</span>
</div>

answered Mar 04 '09 at 18:30

jonnii

28,019
8
80
108

score 1 · Answer 2 · answered Jan 14 '11 at 21:14

Can propose other solution without reversing. It does work in different browsers

<div id="sbar" style="position:relative;">
    <span id="status">Some Text</span>
    <span id="mlog" style="position:absolute; top:0;right:0;">Some text in the right</span>
</div>

score 1 · Answer 3 · answered Mar 04 '09 at 18:40

Yeah... reversing makes it work cause with floats, you need to arrange your elements like a stack that the browser can pick up -

so when floating left

A

B

C

will float to ABC -

A

AB

ABC

when all floated right will give you CBA, as in

A

BA

CBA

I've seen this implemented in firefox, haven't checked webkit. You can be safe with this, though.

score 1 · Answer 4 · edited May 23 '17 at 10:27

1

This code will work fine in Webkit (chrome) but not in firefox

WebKit is wrong. The standard specifies the right-float must go down a line.

For explanation, see CSS: Three Column Layout problem.

edited May 23 '17 at 10:27

Community

1
1

answered Mar 04 '09 at 19:44

bobince

528,062
107
651
834

score 1 · Answer 5 · answered Mar 04 '09 at 19:59

This code will work fine in Webkit (chrome) but not in firefox, where the second span will drop, do you know why?

Yes. The behavior of a floated element will fall below a non-floated element that comes before it in the code. Others have given you the fixes already.

Why does the floated span drop?

5 Answers5