List Item Background Image - Neighbor Floated Content Overlaps <p>I've used list item background images for customized bullets hundreds of times in the past, and somehow never came across this issue.</p> <p>Essentially, I have an IMG floated left of the Unordered List. The bullet background images are set to top-left of each LI. However, the floated image is covering the bullets, as the browser is treating the list as if it's still full width (as if the floated image almost isn't there).</p> <p>It's a bit hard to explain. So here is a screenshot with notes. <a href="http://img695.imageshack.us/img695/1328/cssquestion.jpg" rel="nofollow noreferrer"><a href="http://img695.imageshack.us/img695/1328/cssquestion.jpg" rel="nofollow noreferrer">http://img695.imageshack.us/img695/1328/cssquestion.jpg</a></a></p> <p>Here are some code snippets (sorry, can't upload to a server at the moment):</p> <pre><code>&lt;h2&gt;About Us&lt;/h2&gt; &lt;img src="image.jpg" class="img-left" /&gt; &lt;h3&gt;Heading&lt;/h3&gt; &lt;p&gt;Text&lt;/p&gt; &lt;ul&gt; &lt;li&gt;List Item One&lt;/li&gt; &lt;li&gt;List Item Two&lt;/li&gt; &lt;li&gt;List Item Three&lt;/li&gt; &lt;/ul&gt; ul { padding: 0; margin: 0; } ul li { background: url(../images/bg-main-bullet.gif) top left no-repeat; list-style: none; padding: 0; margin: 0; } .img-left {float: left; margin: 0 19px 0 0;} </code></pre> <p>Does anyone have any ideas how to achieve my desired result?</p> <p>Any tips or input is greatly appreciated! Thanks</p>