Question

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.

Answer 1

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