Impedir quebra de span ou div

Gostaria de colocar um grupo de divelementos de largura fixa em um contêiner e exibir a barra de rolagem horizontal. Os elementos div/ spandevem aparecer em uma linha, da esquerda para a direita na ordem em que aparecem no HTML (essencialmente desembrulhados).

Dessa forma, a barra de rolagem horizontal aparecerá e poderá ser usada em vez da barra de rolagem vertical para ler o conteúdo (da esquerda para a direita).

Tentei colocá-los em um contêiner e depois colocar um white-space: nowrapestilo no contêiner, mas, infelizmente, ele ainda parece embrulhar.

Ideias?

Parecia assim:

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

ATUALIZAÇÃO:
consulte o site para obter exemplos, mas eles estavam errados por não serem de outra maneira - tenho certeza de que o artigo é antigo.

Tente o seguinte:

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

Observe que você pode omitir .slideContainer { overflow-x: scroll; }(que navegadores podem ou não oferecer suporte ao ler isso) e você verá uma barra de rolagem na janela em vez de neste contêiner.

A chave aqui é display: inline-block. Atualmente, ele possui suporte decente entre navegadores , mas, como de costume, vale a pena testar em todos os navegadores de destino para ter certeza.

Funciona exatamente com isso:

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

Eu tinha originalmente float : left;e isso impediu que funcionasse corretamente.

Obrigado por postar esta solução.

Particularmente ao usar algo como o Bootstrap do Twitter , white-space: nowrap;nem sempre funciona em CSS ao aplicar preenchimento ou margem a uma criança div. No entanto, adicionar um border: 20px solid transparent;estilo equivalente no lugar de preenchimento / margem funciona de maneira mais consistente.

Como mencionado, você pode usar:

overflow: scroll;

Se você deseja que a barra de rolagem apareça apenas quando necessário, use a opção "auto":

overflow: auto;

Eu não acho que você deva usar a propriedade "float" com "overflow", mas eu precisaria experimentar seu exemplo primeiro.

Parece que divs não sairá da largura do corpo. Mesmo dentro de outra div.

Eu vomitei isso para testar (sem um doctype) e não funciona como pensado.

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

O que eu estou pensando é que os div internos podem ser carregados através de um iFrame, já que essa é outra página e seu conteúdo pode ser muito amplo.