title: Div Overflow and scroll left
body: <p>I've got a div that has a fixed height of 500px. Contained in the div is images. I've got them stacking and overflowing the way I like currently but instead of when the visible div becomes full filling to the bottom and scrolling down, how do I force the div to scroll on the x axis. Here is my current HTML and SCSS</p>
  
  <pre><code>&lt;div class="gallery"&gt;
      &lt;img src="img/samples/sample-photo-1.jpg" class="wedding" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="portraights" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="family" /&gt;
      &lt;img src="img/samples/sample-photo-1.jpg" class="wedding" /&gt;
      &lt;img src="img/samples/sample-photo-1.jpg" class="wedding" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="portraights" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="family" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="portraights" /&gt;
      &lt;img src="img/samples/sample-photo-2.jpg" class="family" /&gt;
  &lt;/div&gt;
  
  .gallery {
        clear: both;
        margin: 0 0 0 15px;
        max-height: 500px;
        width: 100%;
        overflow-x: scroll;
        display: block;
        img { 
          float: left;
          padding: 3px;
        }
  }
  </code></pre>