HTML/CSS: how to put text both right and left aligned in a paragraph

Question

What would be the best code to have two bits of text in a single paragraph, one left aligned, the other right aligned, that also is:

• the least code as possible
• the easiest for clients to render (i.e. using least resources)

I add this last one to be sure <table><tr><td></td><td align=right></td></tr></table> would get ruled out. Not only is this a beast of code compared to a couple of properly styled <div>, <span> or <p>'s, it's also a beast if you know what a HTML render engine has to load and calculate to decide on the cell sizes before it even get's to painting text in them...

If you're not sure what I mean, here's an example: a page footer with left aligned the name of the user currently logged on, and on the same line right aligned the current date and time and/or website version.

Answer 1

The only half-way proper way to do this is

<p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p> 

however, this will get you into trouble if the text overflows. If you can, use divs (block level elements) and give them a fixed width.

A table (or a number of divs with the according display: table / table-row / table-cell properties) would in fact be the safest solution for this - it will be impossible to break, even if you have lots of difficult content.

Answer 2

I wouldn't put it in the same <p>, since IMHO the two infos are semantically too different. If you must, I'd suggest this:

<p style="text-align:right">
 <span style="float:left">I'll be on the left</span>
 I'll be on the right
</p>

Answer 3

Least amount of markup possible (you only need one span):

<p>This text is left. <span>This text is right.</span></p>

How you want to achieve the left/right styles is up to you, but I would recommend an external style on an ID or a class.

The full HTML:

<p class="split-para">This text is left. <span>This text is right.</span></p>

And the CSS:

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}