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

Viewed 115410

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.

6 Answers

Ok what you probably want will be provide to you by result of:

  1. in CSS:

    div { column-count: 2; }

  2. in html:

    <div> some text, bla bla bla </div>

In CSS you make div to split your paragraph on to column, you can make them 3, 4...

If you want to have many differend paragraf like that, then put id or class in your div:

Related