[web] Mixing left- and right-align on one line.

Started by
0 comments, last by ToohrVyk 15 years, 12 months ago
Hello. I have inline elements in a paragraph p tag. I want the first of them to be left-aligned as normal and the rest to be right-aligned. I was hoping something like this would work <p>left left elft <span style="text-align:right">right right right</span></p> But that doesn't work, even giving the p a style of "width:100%" and the span "margin-left:auto;float:right" and other fiddling doesn't seem to help. At the moment all I can do that works is <p style="float:left">left left left</p><p style="float:right">right right right</p> The trouble now is the next block element flows up and underneath the two <p>s! I'm running out of ideas. Help!
Advertisement
To float an element, you must specify a width for that element. Otherwise, display will be random on the various browsers (it's already hard to get cross-browser displays with conforming code).

I would suggest:

<p style="float:left;    text-align:left;    width:50%">Left</p><p style="float:right;   text-align:right;   width:50%">Right</p><p style="clear:both">Below</p>

This topic is closed to new replies.

Advertisement