Rather than using an image editor to assemble 6 images into one I have been successful in doing what I want using CSS.
There are six images: two on the top row with widths 384 and 177px and four on the bottom row with widths 128, 128, 128 and 177px.
Have tested this page successfully with opera & firefox 3 both in Ubuntu and with IE8 and firefox 3 in Win XP.
I managed to get the images to "stick together" by adjusting the values of the width property in the styles ".top_part" and ".bottom_part" by trial and error.
My question is: other than trial and error how do I determine what values of the width property to use if I wanted to assemble other sets of images in any shape (rectangle, square, triangle, parallelogram & so on)?
Would someone be able to help me to understand how this works?
The four styles that accomplish this are embedded in the .htm file on my experimental site. Here is the link: