Floating multiple paragraphs around image

[john010117]

Hi – first of, wanted to say I’m a huge fan of CSS-Tricks (especially the screencasts). Now, down to business.

I’m having an issue where multiple paragraphs just simply refuses to float around a single, large image. I have the following code below:

HTML:

Code:

This is some text. This paragraph has multiple lines. It should float around the image.

This is some more text. This paragraph has multiple lines. It should also float around the image.

CSS:

Code:

img.left { float:left; margin:0 5px 5px 0; }

While the second image is floating next to the image, the last line of the second paragraph (the paragraph is fairly large) is not going under the image (where the image ends and there’s nothing but a blank space there).

I tested it both in FF3 and IE7 (same problem in both browsers).

Help is appreciated.

[MPlant]

Hi John,

Can you post a full example because there is nothing wrong with your code here. The second paragraph will wrap down as expected. Although, I can say if the last line is your issue perhaps the margin is just in the right place to keep that line from wrapping under the image. Try adding another line after it and you should see it wrap, in which case the height of your image has not ended before the last line of text appears.

Let me know how it goes, and if you aren’t using firebug, try it out!

[john010117]

Ah… *smacks head* It was because of the overflow:auto element that I set for every element. This is yet another reminder why I shouldn’t code late in the night.

Sorry for wasting your time, and thanks for the timeliness of your response. I appreciate it.

[Author]

Posts