Div principal, con DIV's dentro: Float

[Ainner]

¡¡Buenas a todos!!.

Pasare a comentaros mi problemas, vereis:

Tengo un DIV principal (un DIV contenedor), en el que tengo, muchos DIV's mas pequeños dentro, todos estos DIV's, interiores, tienen un float:left.

La cuestion es que el DIV principal tiene un overflow:auto, pero cuando los DIV's interiores llegan al fin del DIV contenedor, saltan abajo y no se meten por dentro del DIV.

Ejemplo:

Código HTML:

<div style="width:320px; height:320px; overflow:auto">
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
</div> 

Pues, lo que yo quiero, es que los DIV's interiores, no salten una posicion, si no que sigan rectos, para poder hacer scroll horizontal en el DIV principal.

He probado muchos estilos, tanto en el DIV principal como en los interiores, pero nada funciona. ¿Que me decis?.

Muchas gracias!!

[anfergon]

Hola:

Acabo de ver tu código en Firefox y en IE8 y no veo problemas. Los divs aparecen en orden.

[dark_lock]

A mi me moquea lo del float... a ver

Si no le pusieras un tamaño fijo al contenedor... y a los div de detro le pones float... cuando lo visualizas el contenedor no se ve ya que ni se inmuta de que hay algo dentro... es por culpa del float que no se muy bien como se comporta...

Intenta una cosa... no lo pongas float: left;... pon display: inline-block;

A ver que sale

Un saludo

[pcexpansion]

Tienes el problema en el ancho de los divs interiores, suman más que el contenedor. En Ie8 no debe darte problemas, pero en los demás navegadores, se deben visualizar dos divs en la primera fila y uno en la segunda.

[Ainner]

pero en los demás navegadores, se deben visualizar dos divs en la primera fila y uno en la segunda.

En el clavo.

El problema es que quiero que se vean todos en linea, y que se metan por dentro de el div.

Pero ya lo e solucionado, de esta forma:

Código:

<div style="width:200px; height:320px; overflow:auto">
    <div style="width:400px; height:320px; overflow:hidden">
        <div style="width:100px; height:20px; float:left">
            Prueba
        </div>
        <div style="width:100px; height:20px; float:left">
            Prueba
        </div>
        <div style="width:100px; height:20px; float:left">
            Prueba
        </div>
        <div style="width:100px; height:20px; float:left">
            Prueba
        </div>
    </div>
</div>

De esta forma, el DIV mas externo, solo contiene un DIV dentro, que es el contenedor, asi, si dispongo del scrollbar horizontal, ya que un unico DIV, por muy ancho que sea, no puede saltar de linea.

Salu2 y Gracias!!

[kraciboy]

Lo hubieses solucionado si llegas a ponerlo así:

Código:

<div style="width:320px; height:320px; overflow:auto">
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
    <div style="width:80px; height:20px; float:left">
        Prueba
    </div>
<div style="clear: both;"></div>
</div>

Un saludo!