Evitar envoltura de span o div

Me gustaría poner un grupo de divelementos de ancho fijo en un contenedor y hacer que aparezca la barra de desplazamiento horizontal. Los elementos div/ spandeben aparecer en una línea, de izquierda a derecha en el orden en que aparecen en el HTML (esencialmente sin envolver).

De esta manera, aparecerá la barra de desplazamiento horizontal y se puede usar en lugar de la barra de desplazamiento vertical para leer el contenido (de izquierda a derecha).

Intenté flotarlos en un contenedor y luego poner un white-space: nowrapestilo en el contenedor, pero, por desgracia, todavía parece envolverse.

Ideas?

Se veía así:

.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>

ACTUALIZACIÓN:
Consulte el sitio para ver ejemplos, pero se equivocaron al no ser de otra manera; sin embargo, estoy seguro de que el artículo es antiguo.

Prueba esto:

.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>

Tenga en cuenta que puede omitir .slideContainer { overflow-x: scroll; }(qué navegadores pueden admitir o no cuando lee esto), y obtendrá una barra de desplazamiento en la ventana en lugar de en este contenedor.

La clave aquí es display: inline-block. Hoy en día, cuenta con un soporte decente para varios navegadores , pero como de costumbre, vale la pena probarlo en todos los navegadores de destino para estar seguro.

Funciona solo con esto:

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

Originalmente tenía float : left;y eso evitó que funcionara correctamente.

Gracias por publicar esta solución.

Particularmente cuando se usa algo como Bootstrap de Twitter , white-space: nowrap;no siempre funciona en CSS cuando se aplica relleno o margen a un niño div. Sin embargo, agregar un border: 20px solid transparent;estilo equivalente en lugar de relleno / margen funciona de manera más consistente.

Como se mencionó, puede usar:

overflow: scroll;

Si solo desea que aparezca la barra de desplazamiento cuando sea necesario, puede usar la opción "auto":

overflow: auto;

No creo que deba usar la propiedad "float" con "overflow", pero primero tendría que probar su ejemplo.

Parece que los divs no saldrán del ancho de su cuerpo. Incluso dentro de otro div.

Lancé esto a prueba (sin un doctype) y no funciona como se pensaba.

.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>

Lo que estoy pensando es que los div internos podrían cargarse a través de un iFrame, ya que esa es otra página y su contenido podría ser muy amplio.