6

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.

zmol
  • 1,731
  • 5
  • 14
  • 14
  • If your container is specifying a width this won't exceed that. Could you post your html and css (body and wrapper divs) – Gregg B Feb 01 '11 at 01:50
  • @Grillz My body doesn't have any width, but my wrapper has `width:800px;` – zmol Feb 01 '11 at 02:18

4 Answers4

5

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;      
  }
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Never made a horizontal scrollbar, because I personally hate them. But this works perfectly. Thanks! – bozdoz May 04 '13 at 21:53
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.

Community
  • 1
  • 1
parent5446
  • 898
  • 7
  • 17
1

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

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
0

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;
        }
Sukhdev
  • 33
  • 3