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.