title: Lists next to floated elements: How to get list items in the right place?
body: <p>This fiddle shows the basic problem:
  <a href="http://jsfiddle.net/boldewyn/Qvfgv/" rel="nofollow">http://jsfiddle.net/boldewyn/Qvfgv/</a></p>
  
  <p>There is a floated element and next to it a list in the main flow. The list items extend into the space of the floated element.</p>
  
  <p>A workaround is to use <code>overflow: hidden</code> on the <code>&lt;ul&gt;</code>. But then the list doesn't 'flow' around the div anymore but stays at the right all the time, which is undesired for all the white space below the floated element.</p>
  
  <h3>What I'm looking for:</h3>
  
  <ul>
  <li><p>The list should float around the floated block, and the list items should stay out of the floated block's area. Altrnatively it's ok for single <code>&lt;li&gt;</code> elements to be pushed right (e.g., via <code>overflow: hidden</code>).</p></li>
  <li><p>A pure CSS solution without background images or JavaScript. This is for a print preview page, which must additionally be tailored for people w/o JavaScript and down to IE7.</p></li>
  <li><p>The list bullets should be exdented on the left, just like the browser's default. That means, list items next to the floated element should gain an extra space to it to place the bullet in it.</p></li>
  </ul>
  
  <h3>What doesn't work:</h3>
  
  <ul>
  <li><p>using background images I could give the individual list items padding and would be set. But this is not reliable enough, because the page's intent is to be printed.</p></li>
  <li><p>I don't know the exact width or height of the floated element. If I did, I could fix the problem with <code>li { margin-left: "floated-element's width" + 20px; }</code>.</p></li>
  <li><p>I experimented a bit with combos of <code>text-indent</code>, <code>list-style-position</code> and such, but haven't been able to come up with a useful solution.</p></li>
  </ul>
  
  <p>It may well be, that there is no CSS-only solution for this. This question is literally my last resort before telling the customer that it's not possible.</p>