How to setup a div which will take an "infinite width" (horizontal scroller)?

Question

I would like to draw a simple horizontal scroller.

My problem is my elements inside my scroller don't take an infinite width, so after using 100% of the width parent, the next elem will be display to a new line. I was thinking an absolute div was taking an infinite width by default but apparently not, how to make it works ?

I specify that the number of elems is dynamic.

Here is a JSFiddle representing my issue

Answer 1

This is an easy way to do it:

http://jsfiddle.net/thirtydot/gakqm/10/

#scroller-wrapper {
    width: 100%;
    height: 200px;
    background-color: red;
}

#scroller {
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.elem {
    height: 100%;
    display: inline-block;
    outline: 1px solid blue;
}

Answer 2

You need to add overflow:

#scroller {
    position: absolute;
    height: 100%;
    overflow:scroll;
    overflow-y: hidden;
}

Answer 3

CSS:

#scroller-wrapper {
    height: 200px;
    width: 100%;
    background-color:red;
    position: relative;
    overflow-x: scroll;
}

#scroller {
    position: absolute;
    height: 100%;
    white-space: nowrap;
}

.elem {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: auto;
    display: inline-block;
}

http://jsfiddle.net/gakqm/15/