Lining up these photos

Hi all,

So in the below code, I'm trying to line up the top two images. They work fine, but every time I add the code for the image below the two at the top, the image to the right on the top moves to the right (away from the image on the top left) so they do not line up.

I want the two images on the top to line up right next to each other. I also want the image at the bottom to stay where it is.

If you remove the code for the larger image at the bottom, the two smaller images at the top pop back together.

What am I missing?

Thanks!

<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<center>
<span style="color: #000000; text-decoration: none; font-size: 11px; font-family: verdana, helvetica, sans serif;">Snippet here</span><br/><br/>
<table width="300" height="250" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="171" height="61">
<a href="http://www.google.com"><img style="display:block;" src="images/gif1.gif" width="171" height="61" border="0" alt="Logo"></a> </td>
<td width="129" height="61">
<img style="display:block;" src="images/gif2.gif" width="129" height="61" border="0" ></td></tr>
<tr valign="top">
<td width="399" height="149">
<img style="display:block;" src="images/gif3.gif" width="300" height="149" border="0" > </td></tr>

</table>
</center>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>three images</title>

<style type="text/css">
#image-container {
width:300px;
margin:auto;
font-family:verdana,helvetica,sans serif;
font-size:11px;
color:#000;
}
#image-container span {
display:block;
margin-bottom:18px;
text-align:center;
}
#image-container img {
float:left;
border:0;
}
#image-1 {
width:171px;
height:61px;
}
#image-2 {
width:129px;
height:61px;
}
#image-3 {
width:300px;
height:149px;
}
</style>

</head>
<body>

<div id="image-container">

<span>Snippet here</span>

<a href="http://www.google.com/"><img id="image-1" src="images/gif1.gif" alt="Logo"></a>

<img id="image-2" src="images/gif2.gif" alt="">

<img id="image-3" src="images/gif3.gif" alt="">

</div>

</body>
</html>

Lining up these photos

ThatsBoBo

tedster

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week