Any ideas? Before anyone says it, I can’t set the area the boxes are in to a fixed width as its dynamic. Before anyone says, I can do it with jQuery, just want to be able to keep as much of this css based as possible.
I feel like this is what you are going for. All CSS dynamic
Edit: Perhaps I should explain it a little. The width is set to 90% of the parent (presumably the body), this allows the width to remain fluid. The overflow-y: hidden; allows the margin of the slide to hide all the sliders that cannot fit into the current width of the box. The slides having a float:left; allow all slides to be in-line, which would also work.
Hmm… I feel like there should be a way to put all the boxes in a line, having an overflow-x to scroll, and force the box to scroll? or is that only doable on a fixed width? Dwell on this I will.
Edit: Just making sure it worked how I knew it would here: http://codepen.io/pen/10679/9 vertically. Does the non-fixed width then change the box to not act like it does in this last example? Actually now that I tried it with a fixed width, it does not allow for a horizontal scroll either. And oops. Just caught that you were talking about my ID’s, totally just wasn’t thinking ;)