Another method would be to put a table inside the first table cell.
Put in the ...<td>
<table><tr><td>image 1</td><td>image 2</td>
</tr><tr>
<td>image 3</td><td>image 4</td>
</tr></table>
</td>...rest of table.
Make the second table have no cellspacing, cellpadding and no borders if it makes it look better.
You may also have to use valign="top" or "bottom" and align="right" to get them right into the corners.
------------------------
Using pure css you will need something like this:-
<table><tr><td>
<div style="width:?px;"> <!--total of width of left and right images (max of two rows)-->
<img style="float: left" src="image-top-left.jpg">
<img style="float: right" src="image-top-right.jpg">
<div style="clear: both; line-height:0; font-size:0;">divider div</div>
<img style="float: left" src="image-bottom-left.jpg">
<img style="float: right; margin-top:101px;" src="image-bottom-right.jpg">
</div>
</td>
<td>Right cell text</td>
</tr><tr>
<td>lower table cell left</td>
<td>lower table cell right</td>
</tr></table>
Add style="margin-top:?px;" to each image depending on whether it is higher or lower than its neighbour. In my example the bottom right image is 101px less high than its left neighbour so it needs the margin-top to put it in the right bottom corner.
Last edited by Wickham; 09 Aug 2006 at 07:12 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.