CSS: background color for <li> troubles (with floated <img>)

When the <li>'s have a background color and are floating up against an image that is floated left.

I would like the background color of the li to be left justified to the paragraph, not to the left edge of the page. Any bulletproof ways of doing this? I wish it was as simple as adding a display: inline; to the <ul>. A large left margin that is wider than the image is not an option, as the images will be varying widths.

Thanks for your input. This 开发者_StackOverflow中文版one has been an ongoing struggle in my designs, and I would like to figure out a perfect "fix" for this.

Fiddle here: http://jsfiddle.net/3KHKY/3/

/// css ---->

li { background-color: red; margin-left: 10px; color: white;}
img { float: left; margin-right: 10px; }

/// html --->

<p>
  <img src="http://i.ehow.com/images/a04/v1/cb/started-new-kitten-200X200.jpg" />
</p>
<h2>Title</h2>
<ul>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
  <li>lorem ipsum</li>
</ul>
<p>More content here.</p>

This behaviour is inherent in floating layouts. Floating merely pushes the internal contents of other elements to one side: in most cases it does not move the elements themselves (though clearly it can cause them to resize).

As Lex suggests, inline-block is the answer. This causes the element to act in the same way as an image, i.e. to reign in its box and keep that shape no matter what.

Did you mean like that?