display images inline

[goxpix]

Ciao a tutti,

io ho un container e all'interno un content in CSS definito in questo modo:

 
html,body {
	margin:0;
	padding:0;
	height:100%; 
}

div#container {
	position:relative;
	margin:0 auto;
	width:100%;
	height:auto !important;
	height:100%;
	min-height:100%; 
}

div#content {
	padding:1em 1em 5em; 
}

<div id="container">
<div id="content">   </div>
</div>

In seguito vorrei crearmi una lista di immagini che venga visualizzata orizzontalmente. Mi sono creato la seguente porzione di codice CSS:

 
ul.images li {
                float: left;
                margin-left: 2em;
        }

Ma se inserisco le immagini, che sono circa una ventina, le immagini vengono messe una sopra l'altra. Perché?

Il mio codice html é il seguente:

 

<ul class="images">[*][img]1.jpg[/img][*][img]2.jpg[/img]
.....[/list]

Io vorrei che le immagini vengano messe orizzontalmente e che vadano "fuori pagina" e mi venga creata una barra orizzontale per lo scorrimento delle immagini.

Grazie a tutti

[Prill]

Quando si hanno elementi flottanti, essi si dispongono l'uno a fianco all'altro per tutto lo spazio disponibile sulla riga e quando non c'entrano più vanno a capo. Per evitarlo, devono essere inseriti in un contenitore che sia abbastanza largo da racchiuderli. Perciò dovrai assegnare al tuo elenco una larghezza appropriata (tenendo conto di padding, margini e eventuali bordi)

[goxpix]

grazie mille per l'aiuto. Sei stato fondamentele.