Overflow-x : scroll not working

Question

I have a div with floating (left) images inside, but the overflow-x : scroll; appears to not work..

this is my container :

.browse-gallery {
    width: 100%;
    height: 110px;
    overflow-x: scroll;
    overflow-y: hidden;
    border-top: 7px solid #585453;
    background: #585453;
    white-space: nowrap;
    float: left;
}

and the images :

.browse-gallery img {
    width: 109px;
    height: 81px;
    display: block;
    border-top: none;
    float: left;
    position: relative;
    cursor: pointer;
    margin-right: 5.7px;
    white-space: nowrap;
}

How can I solve this ? Thank you.

Answer 1

Remove float and add display:inline-block: Demo

.browse-gallery img {
        width: 109px;
        height: 81px;
        display: inline-block;
        border-top: none;
        /*float: left;*/
        position: relative;
        cursor: pointer;
        margin-right: 5.7px;
        white-space: nowrap;
        background:#fff;
    }