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>

Answer 1

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>

Answer 2

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.

Answer 3

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 http://stackoverflow.com/questions/533607/css-three-column-layout-problem/533671.

Answer 4

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.