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

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;}