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 `

` would get ruled out. Not only is this a beast of code compared to a couple of properly styled `

`, `` or `

`'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.

Accepted Answer

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

This text is left. This text is right.

``` 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: ```

This text is left. This text is right.

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

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

Solution

Problem