[css] CSS to stop text wrapping under image

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.

For those who want some background info, here's a short article explaining why overflow: hidden works. It has to do with the so-called block formatting context. This is part of W3C's spec (ie is not a hack) and is basically the region occupied by an element with a block-type flow.

Every time it is applied, overflow: hidden creates a new block formatting context. But it's not the only property capable of triggering that behaviour. Quoting a presentation by Fiona Chan from Sydney Web Apps Group:

• float: left / right
• overflow: hidden / auto / scroll
• display: table-cell and any table-related values / inline-block
• position: absolute / fixed

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/

setting display:flexfor the text worked for me.

If you want the margin-left to work on a span element you'll need to make it display: inline-block or display:block as well.

Wrap a div around the image and the span and add the following to CSS like so:

HTML

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

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

LESS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }