php - Why is the <li> not lined up -

does know why below css <li> not aligning correctly? should 5 in each row per 2nd row of them.

movie <li> http://i57.tinypic.com/9gd2l5.png

css

#movies { margin:0 auto; width:690px; } #movies ul { background-color:#222; border-radius:10px; text-align: center; display:inline-block; margin:0 auto; padding-left:10px; padding-top:10px; } #movies ul li { float:left; width:115px; padding: 5px 5px 20px 5px; list-style-type: none; } #movies ul li a{ text-decoration:none; display:block; padding:10px; color:#fff; } #movies ul li a:hover{ background-color:#111; } 

code

<div id="movies"> <ul> <?php  foreach($movietitle $movie) { echo '<li>'; echo '<img src="' . $movie->image . '" />'; echo '<div class="cfff">' . $movie->movie_name . '</div>'; echo '<div class="s11 c999">rating: ' . round($movie->rating) . '</div>'; echo '</li>'; } ?> </ul> </div>  </ul> 

the first element of third line doesn't float until left edge because of height of first element in second line (the title “the phantom of opera” fills 2 lines of text) stopping correct alignment of element

to prevent unintended behaviour when using floated elements, should set left clearing each 5n + 1 element of list

#movies ul li:nth-child(5n + 1) {    clear: left; }