Image float and <p> issue in IE

HTML & CSS
1

Hi CSS Experts,

I’m using a typical layout to float an image left and wrap text around it.

<p><img src="me.jpg" alt="me" style="float:left;">Lorem paragraph one...</p>
<p>Here's paragraph two...</p>
<p>And paragraph three...</p>

In Firefox, everything looks OK, but in IE7, if the first paragraph is not as ‘tall’ as the height of the image it is wrapping around, the next paragraph drops to directly under the image it is supposed to floating around.

My workaround has been to code the paragraphs with <br /><br /> instead of the <p> but that can’t be right!

Do I need to wrap an additional div, or something around the whole thing? I have several of these images on the page, as it’s a BIO page for the company.

What am I missing?

Thanks.

-Josh

2

Hi, not quite sure if I understand but you would need to clear the next <p> (paragraph 2?) element to make sure it’s not coming onto the floats :).

clear:left; (or both, whatever :))

3

Hey Ryan,

I’ll be a bit more clear… I don’t want the next paragraph to clear left but in IE it is. Does that make sense?

I want each paragraph to continue to wrap around the image. If this doesn’t make sense, I’ll take a screenshot!

Thanks.

4

OK, here’s a screenshot of the issue. This is taken from IE7… I want paragraph 2 to still wrap around the photo, but as you can see, it drops to below the photo…

Thanks.

5

Well you will need to renest then :). Have it like this
<img>
<p>all the text</p>

FLoat the image and don’t float the <p>

6

Perfect.

Thanks for your help, Ryan.

7

You’re welcome :).