title: Left & right floats within <li>s break in ie - why?
body: <p>I made up this jsfiddle, which displays correctly in all browsers except ie (testing on ie9): <a href="http://jsfiddle.net/uxaPM/1/" rel="nofollow">http://jsfiddle.net/uxaPM/1/</a></p>
  
  <p>As you can see, the idea is to float the first part of the text to the left, and the second part to the right, while keeping everything within each li on one line. However, the third <code>&lt;li&gt;</code> in my example breaks in ie, the third <code>&lt;li&gt;</code> being broken up into two lines. I figured out that I can fix it by adding a min-width to each <code>&lt;li&gt;</code>, but I want to know why the hell this is happening, and if there's a more elegant solution to the problem.</p>