a span floated right within a div - why a new line in IE?

Question

I have 1 span within a container div. I want the span floated to the right. The content within the div and the span should be on one line.

In Firefox, that's how it displays.

But in IE, the span is displayed on a new line:

http://i48.tinypic.com/etzg5f.png

Why do the browsers display the content differently?

Answer 1

You should float the other content to the left. So have two floats; left and right.

Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!

Answer 2

You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.