Images and wrapping around a p

I have a problem...i'm pretty new at css.

I am trying to do a page where I have a bunch of testimonials one after another with a hr in between. Some of these have images that I have floated to the left. Each of the testimonials is in a p tag.

What is happening though is that when the image is bigger than the testimonial, the hr and the next testimonial are also wrapping around the image. I don't want it to do that. I want it to be only the associated testimonial next to the image, the hr under the image and testimonial and then the next testimonial. Make sense?

How can I do that?

Thank you so much for your help!
Neha

You need to clear the float so that it won't overflow the paragraph. A good place to do this would be the <hr>, since you're using it anyway and it's guaranteed to follow the paragraph.


CSS:

#testimonials p {
/* paragraph rules */
}
#testimonials img {
float: left;
margin-right: 10px;
}
#testimonials hr {
clear: both;
}


HTML:
<div id="testimonials">
<p><img src="something.gif" alt="Something" height="100" width="100" />Text text text text text blah blah blah</p>
<hr />
<p><img src="something2.gif" alt="Another Something" height="300" width="100" />Text blah blah</p>
<hr />
</div>

Thank you so much! That worked perfectly!

I so badly want to get the hang of this. These solutions seem so easy and yet I was trying all sorts of complicated things to try to make it work! :)

Thank you again for the help and for the quick reply.
Neha