CODEWITHSUNDEEP
htmlcss
gabitzish
gabitzish

Reputation: 9691

Expand a div's width untill all the children fit

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?

Upvotes: 0

Views: 218

Answers (2)

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

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;
}

Upvotes: 1

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

I've made this jsFiddle , I think it does what you say, I've only tested on chrome.

Update: Second attempt 

#container {
    background : yellow;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    position : fixed;
    width : 400px;
}
#slider {
    background : cyan;
    position : fixed;
}
#slider div {
    margin : 20px;
    width: 100px;
    height: 150px;
    position : relative;
    float : left;
    background : red;
}

Upvotes: 0

Related Questions