How to display a horizontal scroll bar

Question

I have a #items div that wraps an entire .item chain. I want to display elements next to each other, and if they are larger than the page width, display a horizontal scroll bar.

 <div id="somediv"></div> <div id="items"> <div class="item"> Item content </div> </div> <div id="someotherdiv"></div> 

I tried something like this, but it does not work

 #items{ overflow: auto; width:100%; height:200px; /* this is the height of each item*/ } .item{ float:left; } 

I thought it was a way to do this, but I can't get it to work, so I am open to corrections and other ways.

Answer 1

You're on the right track, but you'll need an extra shell to make it work ...

 <div id="scrollable"> <div id="items"> <div class="item"> Item content </div> </div> </div> 

and then your CSS:

  #scrollable { overflow: auto; width:100%; height:200px; } #items { width: 3000px; /* itemWidth x itemCount */ } .item{ float:left; } 

Answer 2

This previous question may help: CSS div element - how to show only horizontal scrollbars?

So, instead of the current css, change it to:

 #items{ overflow-x: scroll; overflow-y: auto; width:100%; height:200px } .item{ float:left; } 

Try and tune if necessary.

Answer 3

This question is related to fooobar.com/questions/258898 / ... , where animuson explains that floating elements cannot be measured.

 #items{ overflow: auto; white-space: nowrap; width:100%; height:200px } .item{ display: inline-block; } 

And the same jsfiddle

Answer 4

I would prefer that you do not provide a width for the # elements. In my case, the .item number was dynamic, and summing them up was not in my preference.

 #items{ overflow: auto; white-space:nowrap; } .item { display:inline; }