I'm hosting a blog for my dad and he wants to wrap text around a bunch of floated images. Right now I have him putting the image inside of a paragraph and floating it like so:

<p><img src="" etc. class="floatLeft" />Here's the text of the first paragraph blah blah blah etc.</p>
<p><img src="" etc. class="floatRight" />Here's the text of the second paragraph blah blah blah etc.</p> 
etc.

Here's the relevant css:

img.floatLeft {
   float: left;
	 padding-right: 1.5em;
	 padding-top: .5em;
	 padding-bottom: 1.5em;
	 display: block; 
}
img.floatRight {
   float: right;
	 padding-left: 1.5em;
	 padding-bottom: 1.5em;
	 padding-top: .5em;
	 display: block;
}

But I'm running into a problem because sometimes the image is larger than the paragraph so it goes outside the boundaries of the paragraph according to the float rules. This is good, except sometimes subsequent paragraphs overlap the borders of the floated image. Specifically the top border.
You can see an example here: http://www.earthlytents.com/ See the 7th paragraph of the post entitled: "Ramparts, Armenians and Messianic Jews"
Here's a screenshot with a 1px border around the image so you can see the overlap clearly.

http://www.earthlytents.com/images/OverlapProblem.jpg

I tried separating the images from the paragraphs and putting them in divs, but that didn't fix anything:

<div class="floatLeft"><img src="" etc. /></div>
<p>Here's the text of the first paragraph blah blah blah etc.</p>
<div class="floatRight"><img src="" etc. /></div><p>Here's the text of the second paragraph blah blah blah etc.</p>

Does anyone know of a solution to wrap text around a series of floated (left and right) images with consistent padding?

Also, the top couple of posts are all corrected now, but in some of the later ones, you'll see that the <p> tags are not all closed. I'm working on going through and fixing all of those. I thought this was the problem, but after I fixed the first three or four posts, the problem persisted.

Thanks for your help!

-bennybobw