Question

I’m trying to make a simple slider so I’m using a div (#container) to hold the items that I need to slide (this div will have overflow:hidden), a div (#slider) that I want to move so that all the items will be moved together, and divs that fit in the slider.

I want the slider’s width to expand until all the items fit to the same row with float:left.

I have this jsFiddle : http://jsfiddle.net/rBFPL/5/ and I would need some help to make the red divs on the same row and the cyan div expand its width.

Can you help me with this?

Answer 1

Update: http://jsfiddle.net/HCYPD/3/

#container {
    width : 400px;
    height : 200px;
    position : relative;
    background : yellow;
    overflow: hidden;
}

#slider {
    margin : 5px;
    position : absolute;
    background : cyan;
    width: auto;
    height : 190px;
    white-space: nowrap;
}

#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    display: inline-block;
    background : red;
}