Horizontal scroll bar for thumbnails - html

Question

I'm having a thumbnail with imgs in divs, so when a img press its shows big in the same window.
I wish to scroll horizonal to see them, instead of vertical as the default.
I mannaged to hide the y scroll bar using:
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
now how do i make the imges run out of horizonal limit rather then vertical limit.
my pics are serrunded by:
<div class='item'>
<img src='picaddress.jpg' alt='picDescription' />
<p>'picDescription'</p>
additonal code:
<div id="imagegallery">
<div id="items">
<div class='item'>
<img src="images/img1.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img2.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img3.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img4.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
<div class='item'>
<img src="images/img5.jpg" alt="Test Image">
<p>'Test Image'</p>
</div>
</div>
</div>
</div>
CSS:
#imagegallery{
background:#F2F2F2;
padding:10px 10px 10px 10px;
}
#imagegallery #items{
width: 100%;
border: 1px solid #DFDFDF;
background:white;
height: 100px;
overflow: auto;
}
#imagegallery #items .item {
float: left;
padding:5px;
position: relative;
width: 102px;
height:77px;
margin: 10px;
background-color: #fff;
cursor: pointer;
border: 1px solid white;
display: inline;
}
#imagegallery #items .item:hover{
border: 1px solid #ddd;
}
#imagegallery #items .item img {
max-width:100px;
max-height:75px;
width:100px;
}
#imagegallery #items p{
display:none;
}
it's a dynamic page so number of pics changes.

Answer 1

I hope I understand you right and you want to have the images displayed next to each other instead of under each other.
To make that work you could use the float property on the div with class "item", like so:
div.item {
float: left;
width: 100px;
}
Don't forget to clear after the items.
If the width of all the items is bigger then the width of the surrounding div (with overflow-x: scroll) you'll get what you want.
Example created at http://jsfiddle.net/deCube/Ctja7/.

Answer 2

You can use an "ul" in your div and display as manu "li"s in the "ul" as you want on one line. Then to show another line of images below, just repeat the "ul & "li"s
Exmaple:
<div id="images">
<ul>
<li><img src="images/rings/thumbnails/image1.jpg"></li>
<li><img src="images/rings/thumbnails/image2.jpg"></li>
<li><img src="images/rings/thumbnails/image3.jpg"></li>
<li><img src="images/rings/thumbnails/image4.jpg"></li>
<li><img src="images/rings/thumbnails/image5.jpg"></li>
</ul>
</div>
You can then just style the "div", "ul" and "li" with css. See an example page I have here. Each line of images is an "ul" with 5 "li"s in it. You are more than welcome to copy the code if you think it's useful.