multiple alignments in one paragraph

using span to align text right

[abushahin]

The text in my paragraphs are aligned left, i wanted to know how can i align some text to the right?

<p style="text-align:left;">text on the left <span style="text-align:right;">text on the right</span></p>

this doesnt seem to work am i missing something?
I dont want to use padding as that will vary from browser to browser i need to have it all in the same paragraph without line breaks.

any help appreciated.

[penders]

text-align only applies to block level elements and aligns text within that element, so in your example, the span would need to take up the remaining width of the paragraph, which it clearly doesn't.

Why does it need to be in the same paragraph? Is it still to be read like a paragraph of text?

One way you could perhaps achieve this, although it would very much depend on the quantity of text you have, would be to absolutely position the inner span to the top/right of the relatively positioned paragraph...

HTML:

<p class="container">text on the left <span>text on the right</span></p>

CSS:

.container { 
  position: relative;   /* Reqd to pos absolute within */ 
  text-align: left; 
  background-color: #fee; /* Demo only */ 
} 
.container span { 
  position: absolute; 
  top: 0; 
  right: 0; 
}

[abushahin]

penders, thank you!
i need it to be in the line because it is part of some search results which upon hover reveals itself. if that makes sense.
any idea if this has any issues with other browsers works well with firefox.
thanks again

ps would be able to force the span in the above (my example) to take up the remaining text of the paragraph without writing extra characters?

[lucy24]

You can also do it with a float. Does either part of the text take up multiple lines? If both parts are short, make the main paragraph right-aligned and put the left-aligned part into a float directly before it. If you just want a little bit of right-aligned text at the end, make it into a float within the paragraph. Some browsers will insert a line break but most will continue from where you were. Include a good bit of padding on the float so the two parts won't crash into each other.

[penders]

lucy24's solution is a good alternative and can be achieved with the same/similar markup. Float the <span>.

Both have good browser support AFAIK. Although IE6 might be a problem.

ps would be able to force the span in the above (my example) to take up the remaining text of the paragraph without writing extra characters?

Not sure what you mean? ...Creating the <span> with JavaScript?

[abushahin]

Thanks guys! very much appreciated!