Align 3 images on one line in exact position

[ahanberry]

The following table works perfectly for all browsers on the mac. However, because the align attribute is deprecated, the first image doesn't show up for all browsers in Windows. I tried using "align" in the img tag too, but that didn't help. I need to rewrite the code for the table using CSS but I don't know it well enough to get the placement of the 3 images in the correct position...they need to be exact.

I don't really need this in a table, I just used it to get the images to be in the correct position. What I want it to look like is:

image image image

<table align="center" cellspacing="0" cellpadding="0" border="0" width="573">
<tr>
<td width="191" align="left">
<a href="http://www.example.com/advertise.html"><img src="http://www.example.com/images/adslink.gif" border="0"></a>
</td>
<td width="191" align="center">
<a href="http://www.example.com/archive.html"><img src="http://www.example.com/images/archivelink.gif" border="0"></a>
</td>
<td width="191" align="right">
<a href="http://www.example.com/contact.html"><img src="http://www.example.com/images/contactlink.gif" border="0"></a>
</td>
</tr>
</table>

Any help would be so appreciated!

[edited by: eelixduppy at 2:27 am (utc) on Dec. 9, 2008]
[edit reason] exemplified [/edit]

[commanderW]

Hi - In your html -

<DIV class="box">
<A HREF="" title=""><img src="" alt=""></A>
<A HREF="" title=""><img src="" alt=""></A>
<A HREF="" title=""><img src="" alt=""></A>
</DIV>

In your css -

.box
{
width: 573px;
margin: 0px;
padding: 0px;
}

.box img
{
float: left;
width: 91px;
margin: 0px;
}

Bear in mind that pixel perfect positioning doesn't always work the same way in all browsers. You may need to widen the div if one of the images drops down.
You may want to float the div as well, because "an unfloated div does not contain it's floated children" (I learned that here from the gurus!), and the page can go wonky on you. For instance, things outside the div won't position properly, or the images inside the div won't float where they're supposed to. This all depends on what's on the rest of your page.

Also, you can float left or right, but not center. So if your div is wider than the total of your floated images, positioning them in the center may require margins or padding. But here is a neat trick i've gotten a lot of mileage out of lately.

.box
{
display: inline;
text-align: center;
width: 573px;
margin: 0px;
padding: 0px;
}

.box img
{
width: 91px;
margin: 0px;
}

This causes the browser to treat the images like words (more or less), and they will be centered on a line. If the div needs to be wider than the total width of the images, they will stay in the center, and if you add some, and they are forced to drop to the next line, those will be centered automatically too! You may still need to float that div anyway, because with or without floated children, an unfloated div acts differently than a floated one.

There is also absolute positioning, which you might like more. However, I haven't used this much at all and so can't advise you properly.

w3schools is a website with a very good html and css reference and tutorials which allow you to play with the code. In tandem with webmasterworld, it's a great way to learn to code !

caveat- I too am on a Mac and rarely have the opportunity to check my code in IE (but I keep Mac IE 5.2 around to break my pages against, so I'm feeling pretty confident that this simpler stuff will work across the board.). After reading about all the hacks and workarounds and conditional statements for IE, I try to avoid pixel perfect layout, and leave the 'joints' loose, and pray :)

[edited by: commanderW at 6:47 am (utc) on Dec. 9, 2008]

[ahanberry]

Thank you but this didn't work...part of the problem may be that in my original post, I wrote what I want it to look like is this:

image image image

didn't format correctly.

I want the first image on the left, the second image in the center and the third image on the right...with about 100 px margin on left and right.

When I tried your recommended CSS, the first image increased in size and the last 2 decreased in size. I modified the width and margin and was able to get the first image to appear correctly, but the second 2 were still very small and right next to the 1st.

Any suggestions? Thanks again!

[birdbrain]

Hi there ahanberry,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#box img {
width:191px;[red]
/* this border value is only for the example and should be set to 0;*/[/red]
border:1px solid #000;
}
#right{
float:right;
margin-right:100px;
}
#left{
float:left;
margin-left:100px;
}
#center {
display:block;
margin:auto;
}
</style>
</head>
<body>
<div id="box">
 <a href="#" title=""><img id="right" src="right_image.jpg" alt="right"></a>
 <a href="#" title=""><img id="left" src="left_image.jpg" alt="left"></a>
 <a href="#" title=""><img id="center" src="center_image.jpg" alt="center"></a>
</div>
</body>
</html>

birdbrain