homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
multiple alignments in one paragraph
using span to align text right
abushahin

5+ Year Member



 
Msg#: 4392568 posted 5:03 pm on Nov 30, 2011 (gmt 0)

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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4392568 posted 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

5+ Year Member



 
Msg#: 4392568 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4392568 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4392568 posted 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

5+ Year Member



 
Msg#: 4392568 posted 6:13 pm on Dec 2, 2011 (gmt 0)

Thanks guys! very much appreciated!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved