Make Child Divs Display Inline With 100% Width And Parent Overflow Scroll

I've tried all day and can't seem to get this to work. Here is a fiddle so you can understand what I'm talking about: http://jsfiddle.net/P2BqP/I am sure it can be done with no Jav

Solution 1:

Simplified version, but should get you the general idea:

CSS:

#container {
    background-color:#CCC;
    min-width:50%;
    max-width:300%;
    overflow-x:scroll;
    white-space:nowrap;
    display: block;
}

#container div {
    border: 1px solid #006;
    white-space:nowrap;
    display: inline-block;
    width:100%;
}

http://jsfiddle.net/P2BqP/3/

Solution 2:

Thanks for the help, I actually ended up doing this: http://jsfiddle.net/P2BqP/13/ I was trying to make a carousel that wraps the text inside the child divs. Seems like i was trying a wrong approach.