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 {
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>
UPDATE:
See site for examples, but they were wrong about not being another way – I'm sure the article is old though.
Best Answer
Try this:
Note that you can omit
.slideContainer { overflow-x: scroll; }
(which browsers may or may not support when you read this), and you'll get a scrollbar on the window instead of on this container.The key here is
display: inline-block
. This has decent cross-browser support nowadays, but as usual, it's worth testing in all target browsers to be sure.