Printable Version of Topic

Posted by: pfortier Mar 2 2012, 01:02 PM

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.

Posted by: Darin McGrew Mar 2 2012, 05:37 PM

It sounds like you need to clear the float in the second example. Please see the FAQ entry http://www.htmlhelp.com/faq/html/images.html#align-image

Posted by: pfortier Apr 6 2012, 09:46 AM

QUOTE(Darin McGrew @ Mar 2 2012, 05:37 PM)