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/