title: Left floated element and unordered lists (ul)
body: <p>I am trying to indent the li elements of a ul. There is a left floated div with an image in it. The li element will indent only if I add left padding that is wider than the image itself. </p>
  
  <p>If I float the ul left, this solves the issue, but then all elements after the ul are floated to the right of the ul.</p>
  
  <pre><code>&lt;div class="left"&gt;
    &lt;p &gt;&lt;img src='image.jpg' alt='homepage.jpg' width="360" height="395" /&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
    Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
  &lt;/p&gt;
  
  &lt;hr /&gt;
  
  &lt;h3&gt;Lorem&lt;/h3&gt;
  
  &lt;ul&gt;
   &lt;li&gt;list element&lt;/li&gt;
   &lt;li&gt;list element&lt;/li&gt;
   &lt;li&gt;list element&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.left {float: left; }
  .left img {padding-right: 20px;}
  ul li { padding-left: 10px; background: blue; }
  </code></pre>
  
  <p>thanks!</p>