Why won't this text float around the image in the middle?

Question

I'm working on this site http://church.allthingswebdesign.com/about.php and why won't the p tags float around the image?

Answer 1

Because paragraphs are block-level elements that will appear on their own lines. Have you tried setting them to display: inline-block and then putting a <br /> after each one to break the text after the end of that paragraph. (There are, of course, many other solutions to achieve this same effect using different tags with the same styles.)

You also need to set the alignment of the image using align="left" (you can use right too, if you want). The paragraphs should work with only this modification. The image also has to be before the first paragraph if you want it to appear in front of that text, otherwise only paragraphs 2+ will wrap around it.

Answer 2

Because the paragraph tags also are set to float.

The paragraph below the image does actually float to the right of the image. However, as the content of the paragraph makes it take up the entire width of the parent element, there isn't room for the paragraph to the right of the image, and it flows below the image.

If you remove the float attribute from the paragraphs, the text will flow around the image.

Answer 3

Wrapping the image in a floating div should fix it. Or at least thats what I do, unless theres a better way.

For anyone else that cares, heres the code, which is setting float attribute on an image tag:

#body img.leftImage {
    float: left;
    width:300px;
    height: 200px;
    padding: 15px;
}

Edit: Guffas answer works :)