I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs from wrapping once they reach the right edge of the container. Initially, I attempted to set the container's overflow to hidden, but that approach did not yield the desired outcome. Here is the basic HTML layout:
<div class="scheduler">
<div class="scheduler-inner">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...<div class="item">...</div>
</div>
<a class="scheduler">...</a>
<a class="scheduler">...</a>
</div>
My main goal is to receive some CSS advice regarding this issue. Ideally, I do not want a scrollbar appearing on .scheduler-inner, and intend to utilize JavaScript for moving the .item left or right upon clicking the anchors. How should .scheduler-inner be formatted? Currently, my CSS looks like this:
.scheduler-inner { overflow:hidden; }
.scheduler-inner > div { float:left; width:10em; }
However, it seems that the items are wrapping as soon as they hit the boundary of .scheduler-inner.