Welcome to WebmasterWorld Guest from 23.22.19.253

Forum Moderators: incrediBILL

Message Too Old, No Replies

Lining up these photos

   
2:17 am on Dec 14, 2010 (gmt 0)

5+ Year Member



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>
4:56 am on Dec 14, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



td width="399"

That's even wider than your declaration for the whole table - table width="300"
9:40 am on Dec 14, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there ThatsBoBo,

the table element should not be used for page layouts, that is not it's purpose. ;)


  1. Why tables for layout is stupid: problems defined, solutions offered [hotdesign.com]
  2. Ten ways to speed up the download time of your web pages [webcredible.co.uk]
  3. Nested Tables: About the (ab)use of tables as layout tools in webpages. [dorward.me.uk]
  4. Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS [phrogz.net]
  5. Why go table free? [workingwith.me.uk]
  6. Why avoiding tables (for layout) is important [davespicks.com]


I would suggest that you code it something like this...


<!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>

birdbrain