CSS have div of images go across and scroll - html

Question

I have this div with images inside it, what I am trying to do is get the images to go all the way across and have the user be able to scroll through them across...I hope this makes sense. Here is my code:
<div id="gallerySet1">
<img src="images/1.2.jpg">
<img src="images/1.3.jpg">
<img src="images/1.4.jpg">
<img src="images/1.5.jpg">
<img src="images/1.6.jpg">
<img src="images/1.7.jpg">
<img src="images/1.8.jpg">
<img src="images/1.9.jpg">
<img src="images/1.10.jpg">
<img src="images/1.11.jpg">
<img src="images/1.12.jpg">
</div>
and the CSS:
#gallerySet1{
display:none;
z-index:1000000;
position:absolute;
top:1500px;
}
#gallerySet1 img{
float:left;
height:400px;
}
I am trying to display my images like this:
http://annasafroncik.it/#galleria (click on one of the 3 images)

Answer 1

You need to use a second div to wrap all the items (this is how slideshows work also). If you're using strictly css, you need to make sure the min-width == the total width of the images. If you want this to be a bit more dynamic you may want to use some JavaScript/jQuery to calculate the width of all the images and set the width of .wrapper to that width (which I've included).
DEMO
HTML:
<div id="gallerySet1">
<div class="wrapper">
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/100/300">
<img src="http://placekitten.com/400/300">
<img src="http://placekitten.com/240/300">
<img src="http://placekitten.com/100/300">
<img src="http://placekitten.com/40/300">
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/100/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/200/300">
</wrapper>
</div>
CSS:
#gallerySet1 {
width: 600px;
height: 300px;
overflow-x: scroll;
}
.wrapper {
min-width: 2200px;
}
.wrapper:after {
clear: both;
content:'';
display: table;
}
img {
float: left;
}
jQuery:
$(document).ready(function () {
var imgs = $('img'),
width = 0,
wrapper = $('.wrapper');
imgs.each(function (index) {
width += $(this).width();
});
wrapper.width(width);
});