Left, center, and right text

Question

What's the best way to obtain three texts on the same line: one to the left, another in the middle, and the third one to the right?

+---------------------------------------------------------------------+
|Page generated in 1 ms           Copyright 2010              Email me|
+---------------------------------------------------------------------+

One text may be longer than the others, but their position must not change. The one in the middle must always be in the middle, regardless of the length of the others.

Doing it with tables would be easy, and I already know how to do that, so "correct" solutions only (using tables for layout is wrong).

---

EDIT: many people assumed for some reason that I needed to display tabular data over several rows. I'm not sure why they thought it was the case, but:

• It will have only one row
• It's not tabular data

For this reason a table is inappropriate, and the solution only needs to work with one line.

Answer 1

So you want to display three pieces of data, over and over, stacked in a vertical pattern that represents some sort of data, options, etc?

Sounds to me like that's exactly what tables are for.

/* Removed box comment, OP fixed it */

Answer 2

Taking your question literally, here's how I'd do it.

<div style="position:absolute;text-align:left">Text 1, a bit longer</div>
<div style="position:absolute;width:100%;text-align:center">Text 2</div>
<div style="text-align:right">Text 3</div>

Whether this will work for you in practice, depends on what the texts actually are. Note that if the divs' container is too narrow, the texts will overlap with one another, and not wrap like they would if they were in table cells.

If you want table-like layout behaviour, you have two choices. You can use tables, or you can use the CSS display:table, display:table-cell etc properties. Sadly, the latter is not supported in IE6 or IE7, so probably isn't really usable on the web just yet.

Answer 3

hi...you can do this with a unordered list and some CSS, if you want to stay 'semantic' that is

<ul id="text_block">
  <li class>Text 1, a bit longer</li>
  <li class>Text 2</li>
  <li class>Text 3</li>
</ul>

and the CSS

ul#text_block {display: table; margin: 0; padding: 5px;}
ul#text_block li {list-style: none; display: inline; margin: 0 40px 0 0;}

hope this helps

Answer 4

I found a very good way to do this that works even if one or more of the paragraphs will span over multiple lines.

<p style="float: left; width: 33.3%; text-align: left">Page Statistics</p>
<p style="float: left; width: 33.3%; text-align: center;">&copy; 2010</p>
<p style="float: left; width: 33.3%; text-align: right;"><a>Email me</a></p>