Image Gallery Horizontal Scrolling With Divs - html

Question

I am currently trying to create an Image Gallery where the user can scroll through the images for each page horizontally (left-right swiping as this is meant for mobile phones and tablets). I can not figure out where I went wrong, anyone have any idea?
My code is found at
http://jsfiddle.net/8tDYk/
CSS:
.media{
width: 100%;
height: 288px;
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}
.image{
float: left;
height: 240px;
width: 75%;
margin: 3.2%;
text-align:center;
border: 7px solid white;
}
HTML:
<div class="media">
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
</div>

Answer 1

If an element has float:left;, it will position itself to the right of the previous element (if there is space)
Otherwise, the element will position itself on the line beneath it.
You can see this when you set overflow-y: visible; on .media
One way of preventing this from happening, is to make an extra inner div, in which you set the width explicitely (Javascript is a big help there) like this:
<div class="media">
<div class="imageContainer">
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt="">
</div>
</div>
</div>
You could then use jquery to set a width for imageContainer like this:
<script type="text/javascript">
var imageWidth = 240;
$(document.ready()
{
$(".imageContainer").width($(".image").length*imageWidth);
});
</script>
::UPDATE::
Working jsfiddle here

Answer 2

The problem is in your .media element,it is set to 100% so how the overflow-x will work.Check this fiddle.
According to this the content you want to scroll is in another div having different style.
The Markup is
<div class='scroll'>
<div class="media">
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/>
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/>
</div>
<div class="image">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""/>
</div>
</div></div>
The CSS is
.media
{
width: 100%;
height: 288px;
float: left;
display: inline-block;
overflow-x: auto;
-ms-overflow-x: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
}
.image
{
float: left;
height: 240px;
width: 75%;
margin: 3.2%;
text-align:center;
border: 7px solid white;
}

Answer 3

Here is Fiddle
in your .image class set width in pixels as
.image
{
width: 400px;
.....
}