homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Aligning Four Objects in a row
yisraelharris




msg:3286073
 10:00 am on Mar 19, 2007 (gmt 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?

 

Moby_Dim




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

Is absolute positioning acceptable here?

Fotiman




msg:3286746
 9:07 pm on Mar 19, 2007 (gmt 0)


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




msg:3286773
 10:01 pm on Mar 19, 2007 (gmt 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.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved