2

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.

Improve this question
6
  • can you please provide a fiddle Commented Mar 19, 2014 at 7:37
  • using float takes things out of the flow of the document Commented Mar 19, 2014 at 7:38
  • So should I remove float ? Commented Mar 19, 2014 at 7:41
  • 2
    If you remove float: left; you'll also have to remove display: block; Commented Mar 19, 2014 at 7:41
  • 1
    @mehdi : you need to add display:inline-block instead display:block Commented Mar 19, 2014 at 7:45

1 Answer 1

Reset to default
5

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;
    }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

display:inline-block fixed it for me. Thanks!
@Delice you can give an upvote to this answer then ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.