title: CSS to stop text wrapping under image
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;li id="CN2787"&gt;
    &lt;img class="fav_star" src="images/fav.png"&gt;
    &lt;span&gt;Text, text and more text&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>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 <code>table</code> (which I was doing) but this is not workable for <a href="https://stackoverflow.com/questions/11406964/jquery-counting-visible-elements-efficiency-speed-problems">this reason</a>.</p>
  
  <p>I've tried the following without success:</p>
  
  <pre><code>li span {width: 100px; margin-left: 20px}
  .fav_star {width: 20px}
  </code></pre>
  
  <p>I also tried <code>float: right</code>.</p>
  
  <p>Thanks.</p>
  
  <p>EDIT: I want it to look like this:</p>
  
  <pre><code>IMG   Text starts here and keeps going... and
        wrap starts here.
  </code></pre>
  
  <p>Not like this:</p>
  
  <pre><code>IMG   Text starts here and keeps going... and 
  wrap starts in the space left for the image.
  </code></pre>