Text overlapping Images

Question

So I've got a simple bio type page with a series of images on the the left with a short paragraph about the person on the right. They are both part of a central column, so there is a navbar to the left of both (image and written bio) and some doodads to the right. The page is just fine in Firefox 3.5.2 and IE 8 (8.0.6001.18813) but a problem manifests itself in both Safari 4.0.3 and Chrome 2.0. The issue is that for some of the bios the text of the bio overlaps the image, acting as though there is no image there. Also, when reloading the page the bios on which the text is overlapping changes sometimes. There seems to be a set of them that can manifest the issue since some of them never do. They're all laid out identically in terms of surrounding tags.

My first thought was that there is a height issue here and some googleing seemed to support this but after some testing I'm unsure. I surrounded the bios section with a new div and set its height to something high and the page had the same issue only it now had tons of new white space below the bios. The images are also set to align=left. Any ideas as what I should be looking for?

Answer 1

Have you set the images to display: block or enclosed them within a <p>?

Leave the images outside the paragraphs.

Change this

<p>text text 
<img />
text text</p>

to

<p>text text</p>
<p><img /></p>
<p>text text</p>