Foros del Web » Creando para Internet » CSS »

Div principal, con DIV's dentro: Float

Estas en el tema de Div principal, con DIV's dentro: Float en el foro de CSS en Foros del Web. ¡¡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, ...
  #1 (permalink)  
Antiguo 06/05/2010, 14:30
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 7 meses
Puntos: 0
Div principal, con DIV's dentro: Float

¡¡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!!
  #2 (permalink)  
Antiguo 07/05/2010, 02:21
Avatar de anfergon  
Fecha de Ingreso: junio-2009
Mensajes: 42
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Div principal, con DIV's dentro: Float

Hola:

Acabo de ver tu código en Firefox y en IE8 y no veo problemas. Los divs aparecen en orden.
  #3 (permalink)  
Antiguo 07/05/2010, 02:37
 
Fecha de Ingreso: marzo-2008
Mensajes: 43
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: Div principal, con DIV's dentro: Float

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

Última edición por dark_lock; 07/05/2010 a las 02:51
  #4 (permalink)  
Antiguo 07/05/2010, 03:59
 
Fecha de Ingreso: mayo-2010
Mensajes: 84
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Div principal, con DIV's dentro: Float

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.
  #5 (permalink)  
Antiguo 07/05/2010, 07:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Div principal, con DIV's dentro: Float

Cita:
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!!
  #6 (permalink)  
Antiguo 07/05/2010, 13:38
 
Fecha de Ingreso: marzo-2008
Mensajes: 48
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Div principal, con DIV's dentro: Float

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!

Etiquetas: float, principal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.