Q:

How to let floated divs stretch outer div's width

I'm building a new page where I want to include a slider that slides from left to right. I have a div within a section and within that div I have three floated articles. What I want is that the (wrapper) div element stretches with it's width so that the inner articles get in one horizontal line.
Here is some code: http://jsfiddle.net/jFSz4/
I can't get it to work without specifying a fixed width to the div element (like 3000px) but that's not what I want. Imagine what would happen if I added a fourth div.
So, I want each article to be exactly 800px width and the wrapping element needs to adjust to that width.
Any help appreciated.

A:

here's a solution using position:relative for the wrapper and position:absolute for the articles where each article's left offset is increased by 800px (the width of one article)
I'm using pseudo-class :nth-child(n) to set this, but you could just as easily set each article's class/id instead
http://jsfiddle.net/pxfunc/jFSz4/20/

edit: solution without position:absolute
here's a solution using display:inline-block; (which is arguably better than float)
http://jsfiddle.net/pxfunc/jFSz4/22/
#slider{
    background: green;
}

#slider div{
    background: yellow;
    overflow:hidden;
    white-space:nowrap;
}

#slider article{
    display:inline-block;
    width:800px;
    border:1px solid #000;
}

