Eu tenho uma lista com títulos, texto e imagens e, às vezes, quando não há texto suficiente, minhas listas começam a ser quebradas, ou seja. a lista começa a se aninhar.

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

Eu tenho um exemplo aqui:

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>

Qual é a melhor maneira de corrigir isso?