Overflow-x not working

Question

I am trying to implement a slider for my gallery. Right now,the css has an issue where the overflow-x doesnt work properly. (I want a horizontal slider and no vertical scroll)

Here's the fiddle:

Please do take a look.

.testimg{     height: 100%;     width: 100%; } #testDiv{     width: 400px;     overflow: auto;     float: left;     overflow-y:hidden;     border:1px solid black;  } .testimgdiv{     width: 120px;     height: 100px;     float: left; } 

Answer 1

Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.

#testDiv{   width: 400px;   overflow-x: auto;   border:1px solid black;   white-space: nowrap;    font-size: 0; } .testimgdiv{   width: 120px;   height: 100px;   display: inline-block; } 

Fiddle

Note: I'm using font-size: 0 to make the items appear right next to each other.

UPDATE

As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):

#testDiv {   width: 400px;   display: flex;   overflow-x: auto; }  .testimgdiv {   width: 120px;   height: 100px;   flex: 0 0 auto; }

<div id="testDiv">   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div>   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div>   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div>   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div>   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div>   <div class='testimgdiv'>     <img class="testimg" src="https://picsum.photos/100/100/" />   </div> </div>