Dynamic image sizes with horizontal scroll bar only - html

Question

How can I show only horizontal scroll bars in my div. I have images in the form of strip and I want to show only horizontal scroll bars for them. I do not want the vertical scroll bars to show up. Please help...
Here is my HTML
<div id="containersimg">
<div id="wrapper">
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
<img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
</div>
</div>
and here is my CSS
#wrapper {
width: auto;
height: 130px;
}
#containersimg {
background-color: #bbb;
width: 300px;
height: 130px;
overflow-x: scroll;
}
img {
float: left;
clear: none;
margin: 5px;
}
I have created a fiddle to demonstrate what I want to achieve
Fiddle Link
EDIT 1:
The only way I can think of doing it is by adding the width to the wrapper div, which I can't because the number and the widths of the images are dynamic

Answer 1

Try using overflow-x: scroll; overflow-y: hidden;
This CSS should be used on your div.
It will just show the x-axis scroll bar and hide the y-axis scroll bar. :)
If you want the images to come in one line then add display: inline; white-space: nowrap; to the div. See this.
Or use Lists. :) Like this.

Answer 2

Ok this is my submition.
Your code remains the same. I only added the overflow-y: hidden to the container img style
What i did is added about 6 lines of Javascript. Not Jquery, plain old Javscript and some clever math and this should work
I added a working fiddle .. Enjoy
http://jsfiddle.net/vUEYG/167/
var container = document.getElementById('wrapper');
var TW=0,Width=0; // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
TW=TW+container.children[i].width;
Width=TW/container.children.length+10; // The 10= Margin i.e 5 *2
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);

Answer 3

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.
Quick fiddle to demonstrate.
FIDDLE
CSS:
#wrapper {
width: 500px;
height: 110px;
}
#containersimg {
background-color: #bbb;
width: 300px;
height: 135px;
overflow-x: scroll;
}
.square {
background-color: #00b;
float: left;
height: 90px;
width: 90px;
margin: 5px;
}

Answer 4

try this code. Width of the #wrapper should be image width multiplied by the number of images
#wrapper {
width: 500px;
height:400px
}
#containersimg {
background-color: #bbb;
width: 340px;
height: 130px;
overflow-x: scroll;
overflow-y: hidden;
}
img
{
margin: 5px;
display: inline-block;
}
Demo: http://jsfiddle.net/vUEYG/162/