In your code you have valign="bottom" for a whole row of td cells which are all the same height, so the valign does nothing. All the images will just fill the whole td cell height. The next row of cells has valign="top" which will be needed if some cells have more text than others, but a CSS list or div or p tag will automatically start at the top.
In answering your question, you can use CSS with a list; two lists might be easier to code. The li tags in each list need float: left; to be side by side. The li tags with images will all be the same height because the images are all the same. The second list of li tags will have content that starts at the top.
For both lists (especially the second) you need to clear the floats so that content below the lists doesn't move up to overlap part of the list.
This work, change the image url and width of the li tag to suit it:-
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="Wickham" />
<meta name="description" content="Test items" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style-type: none; }
li { float: left; width: 90px; margin-right: 20px; }
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
</style>
</head>
<body>
<ul>
<li><img src="images/orange65x50.jpg" alt="orange" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
<li><img src="images/orange65x50.jpg" alt="orange W" /></li>
</ul>
<div class="clear"> </div>
<ul>
<li>Text</li>
<li>Text<br />line 2</li>
<li>Text</li>
<li>Text<br />line 2<br />line 3</li>
</ul>
<div class="clear"> </div>
<p>More content here</p>
</body>
</html>
I added in margin-right: 20px to the li tag style to keep them apart.
Last edited by Wickham; 25 Nov 2010 at 01:10 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.