title: How can I make a div scroll horizontally
body: <p>I want to create a layout in which I will like to align contents in a horizontal direction but let each row scroll-able in horizontal direction only. Here is my <a href="http://jsfiddle.net/Pauldic/ps26y3c5/" rel="noreferrer">JSFiddle Sample</a>.</p>
  
  <pre><code>.x-scroller{
      overflow-x: scroll; 
      overflow-y:hidden; 
      height:100px; 
      width: 300px
  }
  </code></pre>
  
  <p>The .x-scroller DIV will be dynamically generated in a loop with her contents, each of the x-scroller DIV will equally have some contents which I will like to be able to scroll in horizontal direction only as can be seen in the picture below: </p>
  
  <p><img src="https://i.stack.imgur.com/hrOIL.png" alt="The .x-scroller DIV will dynamically generated in a loop with her contents each of the x-scroller DIV will equally have some contents which I will like to be able to scroll in horizontal direction only"></p>