Welcome to WebmasterWorld Guest from 54.147.44.13

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
posts:40
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
posts:365
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
posts:4965
votes: 10



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
posts:117
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>
</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.)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members