Welcome to WebmasterWorld Guest from 54.211.101.8

Forum Moderators: not2easy

Aligning Four Objects in a row

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

10+ Year Member



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)

10+ Year Member



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

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




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)

5+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month