473,239 Members | 1,549 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,239 software developers and data experts.

positioning images in left, center & right floated formation

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
2 5670
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Grytpype-Thynne | last post by:
Is it possible to give a width to a floated div which is greater than the width of the image it contains? What I want to do is display some images which will be of different sizes so that they...
7
by: James Thornton | last post by:
I'm trying to make the transition from tables to CSS, and I need someone to explain how to achieve the following layout (understanding the concepts behind this layout will help me considerably in...
5
by: Joy | last post by:
Hi guys, I am in a tricky situation, I really really hope someone will help me. I got a layout with a main container and three colums inside. Main container: 100% height; 90% width; float: left...
7
by: theo | last post by:
Please, Why is this wide 6px border showing up where it is. It's supposed to be at the bottom of the page, inside of base div. I'm positioning wrong, something needs to cleared or x-index...
2
by: Viken Karaguesian | last post by:
Hello all, This question is half css and half html based, so I chose this group. I have a theortical question. When positioning floating <div>'s, how much does it matter what order you put itin...
7
by: GaryDean | last post by:
In my old 1.1 apps the default was MS_POSITIONING="GridLayout" and Textboxes and labels and such always had POSITION: absolute; and I never had any distortion when the page was rendered. Life was...
5
by: Howard | last post by:
I have seen a lot of examples of 2 & 3 Collumn layout schemes. But I have not yet found any examples for positioning images and centering them by the browser. I notice that there are CSS...
2
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, youll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.