CODEWITHSUNDEEP
htmlcss
zmol
zmol

Reputation: 1881

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. 

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

Upvotes: 6

Views: 15695

Answers (4)

Sukhdev
Sukhdev

Reputation: 33

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

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20442

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

Upvotes: 1

methodofaction
methodofaction

Reputation: 72385

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

Upvotes: 5

parent5446
parent5446

Reputation: 898

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.

Upvotes: 2

Related Questions