carousel like with css, overflow-x (horizontal only) <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>