css float - CSS to stop text wrapping under image

Question

I have the following markup:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

I want it so that if the text wraps, it doesn't go into the 'column' for the image. I know I can do it with a table (which I was doing) but this is not workable for this reason.

I've tried the following without success:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

I also tried float: right.

Thanks.

EDIT: I want it to look like this:

IMG   Text starts here and keeps going... and
      wrap starts here.

Not like this:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Answer 1

Very simple answer for this problem that seems to catch a lot of people:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

See example: http://jsfiddle.net/vandigroup/upKGe/132/