How to float elements in a div that is smaller than it's floated elements?

Question

I want to build my own carousel for learning purposes. But I'm curious how to do it properly. I tried to put divs as carousel items next to each other with float:left. Every div has a fixed width and height.

After that, I've put a div around the carousel items, called "clipping". The clipping div has the same size as the elements in it that should be moved at a time (if you move 3 elements by clicking "next", the clipping div's width is equal to the width of these 3 elements). I've seen this in a few examples. Also this clipping div gets overflow: hidden to hide the next and previous carousel items.

The problem is that the elements, which should be hidden through the clipping div, are put on a new line which makes the whole thing unusable.

How can I work around this behaviour?

If the question is not clear enough, tell me, I will try to rewrite it.

Answer 1

You could do something like this :

<div id="a">
  <div id="b">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
  </div>
</div>

"a" has a fixed width. That's like the wrapper of everything, with a overflow set to hidden and so on.

"b" has a fixed width of a lot. It's the wrapper of the content divs (1,2,3) so that they don't get pushed to the next line.

1, 2, 3 just float left as you were doing.

Answer 2

"Horizontal scroll carousel" effects are usually done by having a fixed-width wide object inside a fixed-width narrow container with overflow:hidden. You could try adding a fixed-width wide container around your floating boxes, so that they are laid out independently from the narrow container.