У меня есть список с заголовками, текстом и изображениями, и иногда, когда недостаточно текста, мои списки начинают ломаться, т.е. список начинает вкладываться сам.

<ul>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
</ul>

У меня есть пример здесь:

http://jsfiddle.net/2z6Zn/246/

img {
  float: left;
  margin-right: 0.1em;
}

<ul>
  <li>
    <h3>photo</h3>
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo
  </li>
  <li>
    <h3>photo</h3>
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo
  </li>
  <li>
    <h3>photo</h3>
    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo
  </li>
</ul>

Какой лучший способ это исправить?