CSS float left and right in paragraph with span?

Question

Until now, when I had one line with example

previous --- page width --- next

I used a container div with 2 children, styled float:left & float:right

I am think it could be done from one paragraph line with span's maybe something like:

<p><span class="s-left">previous</span><span class="s-right">next</span></p>

I tried CSS with:

span.s-left { text-align: left; }
span.s-right { text-align: right; }

but that doesn't do it..

Solution

That's because span is by default displayed inline, so it has no defined width for the text to be aligned in (that's a very loose description, but it'll do for now).

If you want to have right and left aligned text it's not much harder, just:

p {
text-align: right;
}
span.s-left {
float: left;
}

A demonstration may be found at JS Bin