What's the standard behavior of float:right following float:left?

Question

Suppose there is such HTML tags:

​<span>
  <span id='s1'>Text 1</span>
  <span id='s2'>Text 2</span>
</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And the css style is:

​#s1 {
  float: left;
}
#s2 {
  float: right;
}

What is the standard behavior of the display?

In some browser, I see

Text 1 Text 2

In some version of IE, I see

Text 1

         Text 2

It seems the float:right span is pushed down to next line.

Answer 1

Modern browsers would properly calculate the width of the shrinkwrapped floats and make them be in the same line, provided the widths of the floats dont exceed the parent elements width. I believe this is the correct behaviour for rendering.

Internet Explorer ( 5, 6, 7 ) won't render them the same way because it's incapable of calculating the width of the shrinkwrapped float, so it'll push it down onto the next line unless you explicitly define the width.

Answer 2

By default, <span> is an inline element. With the exact markup that you have provided, all browsers SHOULD be displaying those two on the same line, unless the computed width of the two <span>s combined is greater than the length of the current line.