By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,918 Members | 1,816 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,918 IT Pros & Developers. It's quick & easy.

positioning images in left, center & right floated formation

P: n/a
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.

Jul 21 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Duran - Ordinary World
Jul 21 '05 #2

P: n/a
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.
Jul 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.