If you want it to work, the elements should not be floated - therefore remove float:left
. Additionally, the display
value should be inline-block
as opposed to inline
.
.media-upload {
height:125px;
background-color:#BBC;
overflow-x:scroll;
overflow-y:hidden;
padding:15px;
white-space: nowrap;
}
.unit-media {
display:inline-block;
width:100px;
height:120px;
border:1px solid #CCC;
}
To address your other concern regarding the space between the elements - see this answer. Simply put, inline
elements respect the whitespace in the markup. You can simply remove the whitespace in order to solve the problem.