Question

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 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>

Answer 1

Did you mean like that?