title: Why do my list item bullets overlap floating elements
body: <p>I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.</p>
  
  <p>Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right <em>inside</em> the <code>li</code> itself. So the margin only helps if I make it wider than the image.</p>
  
  <p>Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated <em>to the right</em> instead of left of the list.</p>
  
  <p>Setting <code>li { list-style-position: inside }</code> does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.</p>
  
  <p>The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?</p>