Una possibile soluzione potrebbe essere l'utilizzo della regola white-space:nowrap, che impedisce il "ritorno a capo" del testo o degli elementi, abbinata ad un display:inline-block per i div "figli", che quindi non sarebbero più floattati (il float renderebbe vana la regola white-space:nowrap).
Esempio:
codice:
#main_wrapper{
height:230px;/* 30px in più per la barra di scorrimento */
width:80%;
margin:auto;
overflow:auto;
white-space:nowrap;/* non farà andare a capo i .item */
}
.item{
display:inline-block;/* per affiancarli */
background:gray;
border:1px solid black;
width:300px;
height:200px;
}
</style>
<div id="main_wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>