how to display a horizontal scroll bar

Question

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.

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

Answer 1

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;      
  }

Answer 2

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.