title: carousel like with css, overflow-x (horizontal only)
body: <p>I have an <code>overflow-x:scroll</code> and <code>overflow-y:hidden</code>. I have images, but when I'm trying to make it only scroll horizontally, it doesn't work? When I highlight the images and drag the highlight downwards, its scrolls down vertically.</p>
  
  <pre><code>#contents
  {
  margin:0 auto;
  text-align:center;
  width:1200px;
  clear:both;
  }
  
  #image_contents
  {
  float:left;
  height: 208px;
  overflow-x:scroll;
  overflow-y:hidden;
  margin:0 auto;
  }
  
  .images 
  {
  float:left;
  margin:2px;
  background:#000;    
  overflow:hidden;
  position:relative;
  display:inline-block;
  }
  
  &lt;div id="contents"&gt;
  &lt;div id="image_contents"&gt;
  
      &lt;div class="images"&gt;
          &lt;img src="1.jpg"/&gt;
      &lt;/div&gt;
  
      &lt;div class="images"&gt;
           &lt;img src="2.jpg"/&gt;
      &lt;/div&gt;
  
      &lt;div class="images"&gt;
            &lt;img src="3.jpg"/&gt;
      &lt;/div&gt;
  
      &lt;!-- and so forth !-&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>