как отображать горизонтальную полосу прокрутки

У меня есть div #items , который охватывает целую группу .item . Я хочу отображать элементы рядом, и если они превышают ширину страницы, отобразить горизонтальную полосу прокрутки.

<div id="somediv"></div>

<div id="items">
   <div class="item">
     Item content
   </div>
</div>

<div id="someotherdiv"></div>

Я пробовал что-то вроде этого, но это не работает

#items{
   overflow: auto;
   width:100%;
   height:200px;       /* this is the height of each item*/ 
}
.item{
   float:left;      
}

Я думал, что это был способ сделать это, но я не могу это сделать работать, так что я м открыты для исправлений и других способов.