Erik Erik - 2 months ago 8
HTML Question

HTML List isn't vertically aligned when using floating images

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.

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


I have an example here:

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>





What's the best way to fix this?

Answer

The part you are missing is to clear the floats. Use this:

li:after {
    content: '';
    display: block;
    clear: both;
}

and now you will have removed the "nesting".

Note that while using floating containers, you should always clear them before the next container that follows thereby creating a fresh block formatting context as it is called. Otherwise you will see unpredictable behavior.

img {
    float: left;
    margin-right: 0.1em;
}
li:after {
    content: '';
    display: block;
    clear: both;
}
<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>