Aligning Four Objects in a row

[yisraelharris]

I am very new to table-less css. I would like to accomplish the following with table-less css:

I have 4 elements that I want displayed:

1. A small icon.
2. Three words of text.
3. Three more words of text.
4. Another small icon.

I want them displayed as follows:

A. All 4 elements lined up horizontally, within a width of, say, 500 pixels.
B. Items 1 & 2 to be left-aligned and items 3 & 4 to be right-aligned.
C. The space between item 1 & 2 and between item 3 & 4 to be exactly 10px.
D. I don't know in advance what the exact text of items 2 & 3 will be, so I don't know exactly what their widths will be.

There should be an easy way to do this, shouldn't there?

[Moby_Dim]

Is absolute positioning acceptable here?

[Fotiman]

Is absolute positioning acceptable here?

IMO, absolute positioning is almost never acceptable. Too many issues when get into variable font sizes, etc. (user increases his/her font size and suddenly things begin to overlap or get cut off).

Just my 2 cents.

[Ingolemo]

The following code should give you the effect you want. It's implemented using floats. I haven't tested it X-browser.

<div class="splitbox">
<div class="first half"><img src="icon(1)"> Three different words(2)</div>
<div class="second half"><img src="icon(4)"> Three more words(3)</div>
</div>

.splitbox, .half {overflow:auto;}
.half {float:left;width:50%;}
.second {text-align:right;}
.first img {float:left;margin:0 10px 0 0;}
.second img {float:right;margin:0 0 0 10px;}

(I believe that there are places where absolute positioning can be used without sacrificing usability, but they're usually very limited cases.)