I wanted several rows of the following: image to the left of text that displays on the right of the image and under when beyond image (i.e text floats around image).

I tried:

<table>
<tr><td><img valign=top align=left src=img.png>My text</td></tr>
<tr><td><img valign=top align=left src=img.png>My text</td></tr>
</table>

This code displays properly but printing from chrome and IExplorer is rendered badly where rows overlap (i.e. image and text sometimes overlap). However, older versions of IExplorer (version 6) renders this properly.

So I tried instead.

<p><img valign=top align=left src=img.png>My text</p>
<p><img valign=top align=left src=img.png>My text</p>

This code prints exactly what has been displayed but the problem is that the next image is not flush left on the page when the text to the right of the previous image was not long enough to continue below the image. In this case the next image starts to the right of the previous image.

I've tried many options but found no solution yet.

It sounds like you need to clear the float in the second example. Please see the FAQ entry How do I align an image to the right (or left)?

Thanks.
The problem was solved by the following:

<p style='float:left;'><img valign=top align=left src=img.png>My text</p>