Left floated element and unordered lists (ul)

Question

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.

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.

<div class="left">
  <p ><img src='image.jpg' alt='homepage.jpg' width="360" height="395" /></p>
</div>

<p>
  Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit. 
</p>

<hr />

<h3>Lorem</h3>

<ul>
 <li>list element</li>
 <li>list element</li>
 <li>list element</li>
</ul>

The css:

.left {float: left; }
.left img {padding-right: 20px;}
ul li { padding-left: 10px; background: blue; }

thanks!