CSS - Show only Horizontal Scroll bar for a fixed width and height div

Question

I got a div which is of fixed width and height:

 #containersimg
 {
    width: 900px;
    height: 135px;
 }

And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.

I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.

Any idea?? Hope can get some help here... thanks...

score 10 · Accepted Answer · answered Nov 08 '11 at 10:50

10

You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/

answered Nov 08 '11 at 10:50

extols

1,762
14
19

2

+1 Good, but I think it's better to give `.square` `display:inline-block` and remove `float:left`. Then give `.wrapper` `white-space:nowrap` and remove the `width` from it. This way you are not limited to 500px width for wrapper. Se here: http://jsfiddle.net/WbVp3/ – Bazzz Nov 08 '11 at 10:55
That would make more sense actually. I've updated the fiddle with your suggestions - also changed the square divs to spans to make sure IE handles them properly with inline-block. http://jsfiddle.net/vUEYG/2/ – extols Nov 08 '11 at 10:59
hi, thanks a lot. But due to some reasons, i could not change the html construct... any idea hw to do that without adding div?? thanks.. – shennyL Nov 08 '11 at 11:03
You might be able to lose the wrapper div now actually and just set `white-space:nowrap` on that http://jsfiddle.net/vUEYG/3/ – extols Nov 08 '11 at 11:13
Brilliant that we managed to find the perfect solution together :) – Bazzz Nov 08 '11 at 12:59

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Give this a go :)

-ms-overflow-x: hidden;

Taken from this great resource CSS div element - how to show horizontal scroll bars only?

edited May 23 '17 at 12:14

Community

1
1

answered Nov 08 '11 at 10:43

Graeme Leighfield

2,825
3
23
38

Can you put your code into a JS fiddle please :) That will allow us to assist better :) – Graeme Leighfield Nov 08 '11 at 11:07
Hi, here is it: http://jsfiddle.net/yenni104/rTjmc/ Got a solution from above posted answer, still thank you so much! – shennyL Nov 08 '11 at 11:24

score 0 · Answer 3 · answered Nov 08 '11 at 10:47

0

you can add first overflow:auto

#containersimg
 {
    width: 900px;
    height: 135px;
overflow:auto;
overflow-x:hidden;


 }

may help you

answered Nov 08 '11 at 10:47

Rashmi Kant

159
1
2

CSS - Show only Horizontal Scroll bar for a fixed width and height div

3 Answers3