Scrollbar orizzontale e div float

[fermat]

ciao!

in un div che ha una grandezza automatica, ho una serie di div float:left.
in modo da affiancarli.
solo che sugli schermi più piccoli, ad un certo punt questi div vanno a capo se sono troppi.
io non so quanti sono questi div con il float (dipende dai record estratti su db).
quindi vorrei che invece di andare a capo, comparisse la scrollbar orizzontale.
è possibile questo?
io per ora ho tentato banalmente così, ma nn funziona (nel senso che vanno a capo):

<div style="overflow-x:auto;">
   <div class="pull-left">...</div>
   <div class="pull-left">...</div>
   <div class="pull-left">...</div>
   <div class="pull-left">...</div>
</div>

[carlomarangoni]

A me risulta che nei mobili la barra orizzontale non c'è (almeno in quelli che ho visto io)

[fermat]

A me risulta che nei mobili la barra orizzontale non c'è (almeno in quelli che ho visto io)

ciao!

si ma parlo di schermi più piccolo non mobili.
parlo anche di un 15" un pò datato.
nel caso di troppi dati, le colonne vanno cmq a capo.
i dispositivi mobile non li ho proprio presi in considerazione!

[carlomarangoni]

Nelle misure dei div usa misure in percentuale e overflow: auto non va nel div ma nel body

[ResianTaxidrive]

Io da utente preferirei comunque scrollare verso il basso che non verso destra.
Ma sono dati tipo tabellari che se vanno a capo perdono di senso?

[fermat]

Nelle misure dei div usa misure in percentuale e overflow: auto non va nel div ma nel body

scusa perchè nel body?
solo quel div deve avere lo scroll orizzontale.
tutti gli altri componenti no!

Io da utente preferirei comunque scrollare verso il basso che non verso destra.
Ma sono dati tipo tabellari che se vanno a capo perdono di senso?

si in questo caso gli utenti preferiscono scrollare in orizzontale.
è stata una loro specifica richiesta!
e per il tipo di dati / pagine, hanno anche ragione a dire la verità!

[carlomarangoni]

Perchè è nella larghezza della pagina che i div non ci stanno non nella larghezza del div

[lucavizzi]

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:

#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>