[html] Prevent wrapping of span or div

I'd like to put a group of div elements of fixed width into a container and have the horizontal scroll bar appeared. The div/span elements should appear in a line, left to right in the order they appear in the HTML (essentially unwrapped).

This way the horizontal scroll bar will appear and can be used instead of the vertical scroll bar for reading through the content (left to right).

I've tried floating them in a container and then putting a white-space: nowrap style on the container, but alas, it still seems to wrap.

Ideas?

It looked like this:

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

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

UPDATE:
See site for examples, but they were wrong about not being another way - I'm sure the article is old though.

Particularly when using something like Twitter's Bootstrap, white-space: nowrap; doesn't always work in CSS when applying padding or margin to a child div. Instead however, adding an equivalent border: 20px solid transparent; style in place of padding/margin works more consistently.

As mentioned you can use:

overflow: scroll;

If you only want the scroll bar to appear when necessary, you can use the "auto" option:

overflow: auto;

I don't think you should be using the "float" property with "overflow", but I'd have to try out your example first.

Looks like divs will not go outside of their body's width. Even within another div.

I threw this up to test (without a doctype though) and it does not work as thought.

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

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

What i am thinking is that the inner div's could be loaded through an iFrame, since that is another page and its content could be very wide.

It works with just this:

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

I did originally have float : left; and that prevented it from working correctly.

Thanks for posting this solution.