div con scroll horizontal

[juandedios]

Hola, quiero poner varias imágenes en sentido horizontal dentro de un DIV de ancho especifico.

por ejemplo: quiero poner 10 imagenes de un ancho de 80px cada una dentro de un div de 500px y que el scroll horizontal funcione. Yo hice lo siguiente:

Código CSS:

.imagen {
    float: left;
    padding: 2px;
}
 
#visor {
    padding: 5px;
    height: 70px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: auto;
}
 

Y el HTML:

Código HTML:

<div id="visor">
    <div class="imagen">
        <img src="imagen1.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen2.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen3.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen4.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen5.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen6.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen7.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen8.jpg" width="80" height="60" alt="Google" />
    </div>
</div>
 

De esta manera el scroll horizontal no aparece y las imagenes de van abajo, es decir en vez de seguir poniendose una al costado de la otra, llega al tope del contenedor que son 500px y se van abajo.

Cuando en overflow-x pongo scroll en vez de auto, la barra de desplazamiento horizontal si sale pero no sirve por las imagenes se van para abajo.

Que estoy haciendo mal???