Dynamic image sizes with horizontal scroll bar only

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.