how to display a horizontal scroll bar

I have a div #items which wraps around a whole bunch of .item. I want to display the items side by side, and if they exceed the width of the page, display a horizontal scroll bar.

开发者_StackOverflow社区<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 this was the way to do it, but I can't get this to way to work, so I'm open to corrections and other ways also.

You are on the right path, but you will need and extra wrapper 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;      
  }

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

So instead of your current css, change it to:

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

Try that and adjust if necessary.

This question is related to /how-to-force-horizontal-scrolling-in-an-html-list-using-css where animuson explained that floated elements cannot be measured.

#items{
overflow: auto;
white-space: nowrap;
width:100%;
height:200px
}

.item{
display: inline-block;
}

And the same jsfiddle

I would prefer you not to provide width for #items. In my case, the number of .item was dynamic and summing them up was not in my preference.

#items{
            overflow: auto;
            white-space:nowrap;
        }

.item {             
            display:inline;
        }