positioning images in left, center & right floated formation

[sylvian stone]

Hi, I'm trying to do something that has always been easy with tables -
namely use a three column layout, and above the main layout, show three
images - one on the absolute left, one on the absolute right, and one
in the middle. The one in the middle needs to be centered, as various
browsers display slightly differently.

However, using the CSS and code below, either the first image is not
shown (IE) or the right image is shown below (Firefox).

I really can't figure out what is the problem:

CSS:

#logobar {position: relative;
left:0px;
width:auto;
height:23px;
border: none;
text-align: center;
}

#l {position: absolute;
float:left;
width:153px;
margin:auto;
}

#c {position: relative;
margin:auto;
width: auto;
vertical-align: middle;
background: white;
text-align: center;

}

#r {position: absolute;
float:right;
right: 0px;
width:-152px;
margin: auto;

}
HTML:

<div id="logobar">

<span id="l"><img src="images/l1.gif"></span>
<span id="c"><img src="images/m1.gif"></span>
<span id="r"><img src="images/r1.gif"></span>
</div>

Any suggestions ?

Thanks
SS.

[Els]

sylvian stone wrote:

Hi, I'm trying to do something that has always been easy with tables -
namely use a three column layout, and above the main layout, show three
images - one on the absolute left, one on the absolute right, and one
in the middle. The one in the middle needs to be centered, as various
browsers display slightly differently.

However, using the CSS and code below, either the first image is not
shown (IE) or the right image is shown below (Firefox).

I really can't figure out what is the problem:

CSS:

#logobar {position: relative;
left:0px;
width:auto;
height:23px;
border: none;
text-align: center;
}

#l {position: absolute;
float:left;
width:153px;
margin:auto;
}

#c {position: relative;
margin:auto;
width: auto;
vertical-align: middle;
background: white;
text-align: center;

}

#r {position: absolute;
float:right;
right: 0px;
width:-152px;
margin: auto;

}
HTML:

<div id="logobar">

<span id="l"><img src="images/l1.gif"></span>
<span id="c"><img src="images/m1.gif"></span>
<span id="r"><img src="images/r1.gif"></span>
</div>

Any suggestions ?

Yes.
/resists temptation of giving the yes/no link

You should not mix position with float.
Get rid of "position:absolute", and the floats will work.
Get rid of "position:relative" on #c, and place <span id="c"> below
the two floats.
Also, on #c: both width and margin set to auto makes no sense afaics.
<span>s don't use a width, unless you set them to be block elements.
To have the image centered inside #c, I'd use a div, not a span.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Duran - Ordinary World

[Beauregard T. Shagnasty]

sylvian stone wrote:

Hi, I'm trying to do something that has always been easy with
tables - namely use a three column layout, and above the main
layout, show three images - one on the absolute left, one on the
absolute right, and one in the middle. The one in the middle needs
to be centered, as various browsers display slightly differently.

http://home.rochester.rr.com/bshagnasty/banner.html

--
-bts
-This space intentionally left blank.