CODEWITHSUNDEEP
csscss-floathtml
TunaFFish
TunaFFish

Reputation: 11302

CSS float left and right in paragraph with span?

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..

Upvotes: 3

Views: 12574

Answers (1)

David Thomas
David Thomas

Reputation: 253318

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

Upvotes: 8

Related Questions