Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Aligning Four Objects in a row

10:00 am on Mar 19, 2007 (gmt 0)

New User

10+ Year Member

joined:Apr 18, 2003
votes: 0

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?

8:25 pm on Mar 19, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 4, 2003
votes: 5

Is absolute positioning acceptable here?
9:07 pm on Mar 19, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 20

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.

10:01 pm on Mar 19, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 14, 2005
votes: 0

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>

.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.)