Span shifts down when float=right

Hello All.
I have a weird observation regarding the CSS float style for span.
Allow me to share details before asking my question:
Screen resolution: 1024x768 (I know my monitor is outdated; it can't display higher than this)

Link: http://www.w3schools.com/js/tryit.as...style_cssfloat
Text entered in the left side:
For some reason, Firefox (3.0.1 on WinXP SP3) and IE (6 on WinXP SP3) display the right span on a different line. However, Google chrome (3.0.195.25) displays it in the same line as I want it to. There is a note on the w3schools page saying if the text needs more space, it will occupy the next line. But in my case I am sure that the text is not needing more space (I tried creating borders and confirm that the text does not overlap). Even then it shifts down :-(.

Can someone help me with this ? My intent is to display both span elements on the same line.

Thanks in advance,
Parag Doke

re: Span shifts down when float=right

That's because <div> is a block element which automatically takes up the full width of the browser's viewport, in this case. Floating the span removes it from the normal flow of the div but will place it below that.

If you float the div left and set a width, you'll see everything on one line. Why Chrome is not acting the same as Firefox, I don't know (did not test myself).

Do not compare IE6 to Firefox. For that matter, do not compare any version of IE to any other browser. Internet Explorer is almost 12 years behind every other browser in modern standards and practices and the worst browser on the planet. Always, always check with the more modern browsers first to see if your markup is correct. Then look at IE to see if/when it screws things up.

re: Span shifts down when float=right

Hello drhowarddrfine.
Many thanks for your inputs. I was able to get it work using the following:
Regards,
Parag Doke
http://paragpdoke.blogspot.com