Preventing text from wrapping around an image (using float)

[mfyvie]

Hi all,

This request is a little similar to this recent thread:
[webmasterworld.com...]

Except that I would like to prevent my text from wrapping under the image in question. Here's what I'm talking about:

<img src="folder.gif" style="float: left"/>
<div style="float: left">This is some long text. The idea is that when the text gets to the point where it would wrap around our image on the left (for example if we resized our browser), then it should not move UNDER the image, but the left edge of each line should stay in line.</div>

If we were to float the image and just add the text afterwards we would expect a result like this:

******* This is some long text.
*IMAGE* The idea is that when the
******* text gets to the point where
it would wrap around our image on the....

My attempt to encase the text in a <div> and float that is an attempt to get a result like this:

******* This is some long text.
*IMAGE* The idea is that when the
******* text gets to the point where
it would wrap around our image
on the....

This works in IE6, however in Firefox 1.0 we get:

*******
*IMAGE*
*******
This is some long text. The idea is that when the
text gets to the point where it would wrap around our image on the....

I've tried all sorts of different combinations of floating and not float, using divs and not using divs, but I can't get both browsers to provide the results I'm looking for.

Any ideas?

[SuzyUK]

Margin the content to clear the required amount of space..

<img src="folder.gif" style="float: left; width: 100px; height: 100px;" />
<p style="margin-left: 100px;">This is some long text. ......</p>