How can I get two block elements to stay on the same line?

Question

I have two span elements that I would like to stay on the same line. In FF and other browsers, my code works fine but in IE6 it breaks. Can someone please tell me what I am doing wrong?

Here is the code I am using:

<span style="font-family:Arial;text-align:left;font-size:30px;color:#06a;">test</span>
<span style="font-family:Arial;float:right;font-size:12px;color:#06a;text-align:left;">This is the line that jumps down and needs to be brought level with the above span element.</span>

Answer 1

The block using float:right should be first in HTML

Answer 2

you should use "float:left" on the first span.

Answer 3

Just a quick note: span, by default, isn't block-level.

Most bugs in IE6's CSS rendering have well-known workarounds and have been well documented here.

As an aside - is IE6 support really important to your site? IE6 use has been dropping sharply lately, and many sites are dropping support for it.

Answer 4

test This is the line that jumps down and needs to be brought level with the above span element.

just add float:left; the first span