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 \[code\]inline-block\[/code\] divs inside a \[code\]div.items\[/code\] 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:\[code\]<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>\[/code\]CSS:\[code\]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; }\[/code\]EDIT: Oreilly has exactly what I'm looking forward to achieve:http://shop.oreilly.com/category/browse-subjects/programming.do