porque me pone todas las imagenes en linea

[carlos_belisario]

Buenas quice dos filas de imagenes digamos que como una piramide pero de solo dos filas de esta manera

Código HTML:

<div id="superior"> 
        <img src="imagenes/conjunto.jpg"/>  
        <img src="imagenes/vestido.jpg"/>       
</div>
<div id="inferior"> 
        <img src="imagenes/img3.jpg"/>  
        <img src="imagenes/img2.jpg"/>      
        <img src="imagenes/img5.jpg"/>
        <img src="imagenes/img17.jpg"/>
</div>
 

de manera que me quedaran dos fotos arriba y cuatro abajo, para quise hacerlo de esta manera

Código CSS:

#superior img{  
    float:left; 
}
#inferior img{  
    float:left; 
}
#inferior{
    text-align:center;
    display:block;
}
#superior{
    text-align:center;
    display:block;
}
 

segun yo que se que estoy equivocado porque no me da el resultado que deseo queria que cada una de las imagenes me quedaran al lado, pero la superior arriba y la inferior abajo no se si me explique bien cual fue mi error??
gracias de antemano y disculpen la molestia