Problems implementing a carousel - css

Question

I'm trying to implement a responsive carousel by myself for a webpage I'm designing. I'm having some issues that may be thousends times easier to ilustrate with some screenshots, so here it goes:
So as you see, I have two arrows to slice the items and a horizontall scrollbar.
The arrows are floated to the left and right respectively, and the items are just inline-block divs inside a div.items container, which has a width of 90% (and overflow-x: scroll or course).
SO now, if I append another item to the DOM, I end with this:
Why did the fourth item go below? I'm not floating the items, and as I specified and horizontal scroll, I would expect it to be at the back and to be able to see it with the scrollbar.
What am I missing?
I'll paste relevant code:
HTML:
<div class="grid">
<div class="left-arrow"></div>
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<div class="right-arrow"></div>
</div>
CSS:
div.grid {
margin-top: 20px;
padding: 10px 75px;
text-align: center;
z-index: 1000;
}
div.grid .left-arrow, div.grid .right-arrow {
position: relative;
top: 70px;
}
div.grid .left-arrow {
float: left;
width: 0;
height: 0;
margin: 0 30px 0 -50px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 35px solid #ddd;
}
div.grid .right-arrow {
float: right;
width: 0;
height: 0;
margin: 0 -50px 0 30px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid #ddd;
}
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
}
div.item {
margin: 10px;
display: inline-block;
position: relative;
left: 0;
}
EDIT: Oreilly has exactly what I'm looking forward to achieve:
http://shop.oreilly.com/category/browse-subjects/programming.do

Answer 1

The container is growing in height to accommodate the additional items. I believe that you should be able to get the effect you are looking for by setting a specific height on the container element.
Edit: After testing some more, it turns out setting the height won't actually have any impact on this. You need to set white-space: nowrap; to get it to actually work.
Here's the full CSS for the div.items (which is all I changed to get this to work in my tests):
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
white-space: nowrap;
}