Floated image surrounded by text

Can someone tell me the css code to wrap a floated image in text?  I want the text of a paragraph to appear both above, beside, and below the image.  I've included a picture of what I would like to do.  Right now, I only know:

<div style="float: right"><img ... />
<p>text...</p>

This has the text beside and below the image but not above.

Many thanks,
George
example-small.jpg
GeorgeClappAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JorisWCommented:
You have to place the image inside the text to accomplish that. For example:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat quam, fermentum eget, laoreet at, posuere et, nulla. Phasellus in enim vel purus egestas pharetra. 
<img src="example.png" style="float: right;"/>
Proin nulla magna, dictum et, pulvinar ac, egestas eget, odio. Pellentesque odio sem, faucibus sed, interdum fermentum, facilisis in, eros. Maecenas ornare tristique sapien. Quisque aliquam tristique erat. Vivamus cursus elit ac lorem scelerisque aliquet. Duis sit amet nulla non quam adipiscing consectetuer. Duis felis massa, fringilla ac, faucibus eu, blandit eu, arcu.
</p> 
<p>Quisque quis urna in purus malesuada gravida. Aenean ac nibh quis leo imperdiet scelerisque. Duis semper enim quis odio. Donec accumsan massa eget enim. Quisque sit amet tellus. Donec feugiat augue eu enim. Vestibulum quam elit, semper a, tempus placerat, auctor at, lectus. Mauris id est ut orci venenatis facilisis.</p>

Open in new window

0
GeorgeClappAuthor Commented:
It works!  I didn't know that was how "float" works.  However, where the text breaks depends on where you place the floated image in the text.  What if the font size changes or the width of page (or column) changes?  You'd have a dangling line of text.
0
JorisWCommented:
Not much you can do about that besides using a fixed width/limited width layout
0
GeorgeClappAuthor Commented:
I've found a couple other approaches.  One is "stacked floats" with different widths, and each float is cleared so it is placed below rather than beside the previous float.  The problem with that in my site is that I have a three column layout, and the clear brings the float to the bottom of the lowest column, not the previous float.
The other approach is to place an empty div with an appropriate height above the floated image.  The empty div has the width of the container, so the floated image is placed below it.  I then insert the <p> with a negative margin so the text flows above the image.  It works in Firefox, but it doesn't work in IE7.
Any suggestions?
Many thanks,
George
0
JorisWCommented:
Ah nice, didn't think of that.

Anyways you can solve the first problem by using "overflow: hidden" on the middle container (where the floated image is in). This works because the container now has a new "block formatting context", float and clears from different block formatting contexts have no effect on each other.

For internet explorer 6 and below you also need to make sure the middle container "hasLayout" (some straing MS feature), in other words if the middle container does not have position absolute, float, width, height or zoom you will have to add "zoom: 1;"
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Applications

From novice to tech pro — start learning today.