title: Image Gallery Horizontal Scrolling With Divs
body: <p>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?</p>
  
  <p>My code is found at 
  <a href="http://jsfiddle.net/8tDYk/" rel="nofollow">http://jsfiddle.net/8tDYk/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="media"&gt;
      &lt;div class="image"&gt;
          &lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;
       &lt;/div&gt;
      &lt;div class="image"&gt;
          &lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;
       &lt;/div&gt;
      &lt;div class="image"&gt;
          &lt;a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGr4F-VQME__rGsSQitz9PkWGJ7C1XbUlhkleUw-5JVyYImWJ6hg" height="250px" style="max-width: 100%;" alt=""&gt;&lt;/a&gt;
       &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>