Question

I have a div whith contains another divs with image. I need to have these divs in a on line but when I add another div whith don`t have enough place so this div go to a new line. Number of divs depend on number of images in db so I need scroll them.

css:

div#saved_images {
    width: 85%;
    height: 135px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 2px dashed #000;
    border-radius: 10px;
}

div.saved_image {
    display: inline-block;
    width: 170px;
    height: 120px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

Thanks for your input.
Here is a jsfiddle: http://jsfiddle.net/remibreton/Sc2L8/

Answer 1

you should use “white-space:nowrap” in div#container.

div#container {
    width: 85%;
    height: 135px;
    overflow:scroll;
    border: 2px dashed #000;
    border-radius: 10px;
    white-space:nowrap;
}