Stacking Divs side by side in CSS

Question

I didn't want to resort to asking here but after hours of frustration I feel I have to!

I have two (could be more) divs that I want side by side. Their parent div has a fixed width and overflow:hidden so we can see at most one div at a time. The problem being is that they will not stack side by side! I've tried float:left and display:inline to no avail.

there is a JSFiddle example I made here

Any help would be much appreciated!

Answer 1

Each of them divs needs display:inline-block and the parent needs: white-space:nowrap so they stay all on one line.

Example:

http://jsfiddle.net/QBhmF/15/