lista de imagenes con float queda escalonada

[mayid]

Estoy haciendo una galeria de imagenes con listas desordenadas, de este estilo:
http://www.desarrolloweb.com/articul...as/index2.html

La segunda imagen queda escalonada respecto de la primera. Por que?

Este es mi css

Código CSS:

ul#listado_de_artistas li {
margin: 1px; 
border: 1px solid #ccc; 
width: 280px;
 display:inline; 
padding: 2px; float: left}
 

Este el html:

Código HTML:

<ul id="listado_de_artistas">
 
                    <li> 
 
            
            
 
            <img src="../perfiles/guil" alt='foto de perfil' class="miniatura_perfil" />    
 
            <a href="http://localhost/estudiodigital/galeria/3">guil guil</a>                   
 
            Nicaragua           </li>
 
            <br/>           
 
                    <li> 
 
                        
 
            
 
            <img src="../perfiles/fgh" alt='foto de perfil' class="miniatura_perfil" /> 
 
            <a href="http://localhost/estudiodigital/galeria/4">Guille fh</a>                   
 
            Paraguay            </li>
 
            <br/>           
 
                
 
        </ul>