penders
msg:4392624 | 7:08 pm on Nov 30, 2011 (gmt 0) |
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
msg:4392683 | 9:41 pm on Nov 30, 2011 (gmt 0) |
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
msg:4392691 | 10:06 pm on Nov 30, 2011 (gmt 0) |
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
msg:4392722 | 11:25 pm on Nov 30, 2011 (gmt 0) |
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
msg:4393511 | 6:13 pm on Dec 2, 2011 (gmt 0) |
Thanks guys! very much appreciated!
|
|
