Why does the floated span drop?

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>

From stackoverflow

• 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>
  

• 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.

• 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.

• 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.