title: List items overlay on floated image
body: <p>I have scratched my head about this a couple of times now, and I can't figure it out.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div class='imgpos_5'&gt;
      &lt;a href='http://jonaseklundh.se'&gt;
          &lt;img src='http://jonaseklundh.se/bilder/icons/archive.png' width=50 height=50&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;ol&gt;
      &lt;li&gt;List item that is quite long and will wrap when reacing the image
      &lt;li&gt;List item
      &lt;li&gt;List item
      &lt;li&gt;List item
  &lt;/ol&gt;
  </code></pre>
  
  <p>With the CSS:</p>
  
  <pre><code>.imgpos_5 {
      float: right;
  }
  </code></pre>
  
  <p>(JSFiddle: <a href="https://jsfiddle.net/5q9zo4te/" rel="nofollow">https://jsfiddle.net/5q9zo4te/</a>)
  But the list items overlay on the image, making the link not work correctly. You can only click the image link where there are no list items that span over it - yet the <em>content</em> of the list items are properly wrapped. How do I fix this?</p>
  
  <p>(EDIT: The actual percentage/pixel width of the imgpos_5 div is unknown to the code, it can contain multiple images, all floated right. The code can not hard-code the width of either the imgpos_5 or the OL tag)</p>