Prevenire il wrapping di span o div

Vorrei mettere un gruppo di divelementi di larghezza fissa in un contenitore e far apparire la barra di scorrimento orizzontale. Gli elementi div/ spandovrebbero apparire in una linea, da sinistra a destra nell'ordine in cui appaiono nell'HTML (essenzialmente non scartati).

In questo modo apparirà la barra di scorrimento orizzontale e potrà essere utilizzata al posto della barra di scorrimento verticale per leggere il contenuto (da sinistra a destra).

Ho provato a galleggiarli in un contenitore e quindi a mettere uno white-space: nowrapstile sul contenitore, ma purtroppo sembra ancora avvolgere.

Idee?

Sembrava così:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

AGGIORNAMENTO:
Vedi il sito per esempi, ma hanno sbagliato a non essere in un altro modo - sono sicuro che l'articolo è vecchio però.

Prova questo:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

Nota che puoi omettere .slideContainer { overflow-x: scroll; }(quali browser possono o meno supportare quando leggi questo) e otterrai una barra di scorrimento sulla finestra anziché su questo contenitore.

La chiave qui è display: inline-block. Al giorno d'oggi questo ha un supporto decente tra browser diversi , ma, come al solito, vale la pena testarlo in tutti i browser target.

Funziona proprio con questo:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

Inizialmente l'ho fatto float : left;e questo ha impedito che funzionasse correttamente.

Grazie per aver pubblicato questa soluzione.

Soprattutto quando si utilizza qualcosa come Bootstrap di Twitter , white-space: nowrap;non sempre funziona nei CSS quando si applica il riempimento o il margine a un bambino div. Invece, l'aggiunta di uno border: 20px solid transparent;stile equivalente al posto di riempimento / margine funziona in modo più coerente.

Come accennato è possibile utilizzare:

overflow: scroll;

Se vuoi che la barra di scorrimento appaia solo quando necessario, puoi usare l'opzione "auto":

overflow: auto;

Non penso che dovresti usare la proprietà "float" con "overflow", ma prima dovrei provare il tuo esempio.

Sembra che i div non andranno oltre la larghezza del loro corpo. Anche all'interno di un altro div.

Ho lanciato questo per testare (senza un doctype però) e non funziona come pensato.

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

Quello che sto pensando è che i div interni potrebbero essere caricati attraverso un iFrame, poiché quella è un'altra pagina e il suo contenuto potrebbe essere molto ampio.