Left/Center/Right without tables? Tell me it can be done!

[Jeff Wishnie]

Here is a _very_ simple layout that I am hoping to achieve in HTML with
CSS and _without_ the use of tables.

I would like to take 3 objects, call them Span1, Span2, and Span3 and lay
them out such that:

Span1 is left aligned in it's container
Span2 is centered in it's container
Span3 is right-aligned in it's container

And the alignments maintain as the container grows and shrinks.

I know I can do this with tables, but is there a way to hand this _very_
basic layout in CSS?

Take this example:

<div id="container">
<span id="left">Should be left<img src=blah /></span>
<span id="center">Should be center<img src=blah /></span>
<span id="right">Should be right<img src=blah /></span>
</div>

I have found a very _complex_ way to do this in CSS as follows:

DIV#container {
position: relative; /* generate a containment box */
}

SPAN#left {
/* do nothing, left by default */
}

SPAN#right {
position: absolute;
right: 0px;
}

SPAN#center {
position: absolute;
right: expression(container.clientWidth/2+center.offsetWidth/2
+"px");
}

But isn't this a bit ridiculous? To have to use absolute positioning and
an _expression_ to calculate the center?

Have I missed something or is this just a big friggin' hole in the spec?

Thanks,

Jeff

[fabrizio giustina]

take a look here:

http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
http://bluerobot.com/web/layouts/layout3.html

it's not SO complex

fabrizio

"Jeff Wishnie" <je...@deluxebiz.com> wrote in message
news:Xns92C5AD7C61E7B...@207.46.239.39...