CSS para detener el ajuste de texto debajo de la imagen

Tengo el siguiente marcado:

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

Lo quiero para que si el texto se ajusta, no entre en la 'columna' de la imagen. Sé que puedo hacerlo con table(lo que estaba haciendo) pero esto no es viable por esta razón .

He intentado lo siguiente sin éxito:

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

También lo intenté float: right.

Gracias.

EDITAR: quiero que se vea así:

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

Así no:

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

Dado que esta pregunta está ganando muchas visitas y esta fue la respuesta aceptada, sentí la necesidad de agregar el siguiente descargo de responsabilidad:

Esta respuesta fue específica para la pregunta del OP (que tenía el ancho establecido en los ejemplos). Mientras funciona, requiere que tengas un ancho en cada uno de los elementos, la imagen y el párrafo. A menos que ese sea su requisito, le recomiendo usar la solución de Joe Conlin, que se publica como otra respuesta a esta pregunta.

El spanelemento es un elemento en línea, no puede cambiar su ancho en CSS.

Puede agregar el siguiente CSS a su tramo para que pueda cambiar su ancho.

display: block;

Otra forma, que suele tener más sentido, es utilizar un <p>elemento como padre para su <span>.

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

Como <p>es un blockelemento, puede establecer su ancho usando CSS, sin tener que cambiar nada.

Pero en ambos casos, dado que ahora tiene un elemento de bloque, necesitará hacer flotar la imagen para que su texto no quede debajo de la imagen.

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

En lugar de PS float:leften la imagen, también se puede poner float:righten li ppero en ese caso, también tendrá que text-align:leftvolver a alinear el texto correctamente.

PSS Si siguió adelante con la primera solución de no agregar un <p>elemento, su CSS debería verse así:

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

Respuesta muy simple para este problema que parece atrapar a mucha gente:

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

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

Ver ejemplo: http://jsfiddle.net/vandigroup/upKGe/132/

Para aquellos que quieran información general, aquí hay un breve artículo que explica por qué overflow: hiddenfunciona. Tiene que ver con el llamado contexto de formato de bloque . Esto es parte de la especificación de W3C (es decir, no es un truco) y es básicamente la región ocupada por un elemento con un flujo tipo bloque.

Cada vez que se aplica, overflow: hiddencrea un nuevo contexto de formato de bloque. Pero no es la única propiedad capaz de desencadenar ese comportamiento. Citando una presentación de Fiona Chan de Sydney Web Apps Group:

• flotador: izquierda / derecha
• desbordamiento: oculto / automático / desplazamiento
• pantalla: celda de tabla y cualquier valor relacionado con la tabla / bloque en línea
• posición: absoluta / fija

Si desea margin-leftque funcione en un spanelemento, deberá hacerlo display: inline-blocko display:blocktambién.

la configuración display:flexdel texto funcionó para mí.

Envuelva un div alrededor de la imagen y el lapso y agregue lo siguiente a CSS así:

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%;
            }

MENOS

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

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