HTML List isn't vertically aligned when using floating images

Question

I have a list with titles, text and images, and sometimes, when there is not enough text, my lists start breaking, ie. the list starts nesting itself.

Answer 1

Remove the CSS you have applied in jSfiddle i.e

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

Instead just add following CSS

ul{
display:block;
clear:both;
}