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.