Tengo una lista con títulos, texto e imágenes, y a veces, cuando no hay suficiente texto, mis listas comienzan a romperse, es decir. La lista comienza a anidarse.

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

Tengo un ejemplo aquí:

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>

¿Cuál es la mejor manera de arreglar esto?