Foros del Web » Creando para Internet » CSS »

problema con float left, desborde

Estas en el tema de problema con float left, desborde en el foro de CSS en Foros del Web. Hola maestros, tengo un problema con css. Resulta que quiero hacer 2 divs que esten dentro de otro div, los 2 anidados que tengan float:left ...
  #1 (permalink)  
Antiguo 07/03/2009, 11:48
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 12 años, 3 meses
Puntos: 14
problema con float left, desborde

Hola maestros, tengo un problema con css.

Resulta que quiero hacer 2 divs que esten dentro de otro div, los 2 anidados que tengan float:left para q queden uno junto al otro, todo bien hasta este punto.

El detalle es que a los 2 hijos les tengo q colocar float:left, pero al hacer esto los 2 hijos se desbordan del padre, esto me obliga a tener q darle una altura definida al padre que sea mayor que la de los hijos, pero esto me amarra mucho el diseño porque si la altura de los hijos es mayor que la de padre los hijos se me desbordaran.
¿Como se arregla este inconveniente?

Saludos
__________________
Juegos
Juegos iphone

Última edición por minkweb; 07/03/2009 a las 12:07
  #2 (permalink)  
Antiguo 07/03/2009, 12:13
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: problema con float left, desborde

Despues de los dos hijos coloca un div que "cancele" el comportamiento del float:

Código css:
Ver original
  1. div.limpia {
  2.     clear:left;
  3. }

Código html:
Ver original
  1. <div id="padre">
  2.     <div class="hijo"></div>
  3.     <div class="hijo"></div>
  4.     <div class="limpia"></div>
  5. </div>

Puedes aplicar mas propiedades a div.limpia, dependiendo de lo que necesites como alto, ancho, etc.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 09/03/2009, 21:08
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 12 años, 3 meses
Puntos: 14
Respuesta: problema con float left, desborde

Muchas gracias estare probando el codigo =D
__________________
Juegos
Juegos iphone
  #4 (permalink)  
Antiguo 10/03/2009, 08:33
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: problema con float left, desborde

Otra opcion, si no quieres agregar un elemento vacio, es flotar el elemento padre. De esta manera se estirara correctamente (para que queda igual que ahora puedes llegar a tener que tambien asignarle un width).
__________________
oohh... quisiera ser godines!!!
  #5 (permalink)  
Antiguo 10/03/2009, 09:33
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: problema con float left, desborde

Otra opción sin poner un div de quiebre podría ser que hagas lo siguiente:


Código CSS:
Ver original
  1. #padre{
  2. min-height:800px; <--------- un numero cualquiera.
  3. overflow:hidden;
  4. }

Esto obliga a los divs padres a que se estiren con los hijos, si quisieras que haya algún espacio antes de que termine el padre, solo le das un "padding-bottom" y ya.

Claro, esto es para navegadores que respetan standares, para ie, tendrás que usar o los comentarios condicionales, o un hack, en cualquiera de los dos casos deberás poner lo siguiente:

Código CSS:
Ver original
  1. #padre{
  2. height: 800px; <--------- numero cualquiera.
  3. overflow:visible;
  4. }


Esto pq IE trata el height, como si fuera un min-height, y se estira cuando lo sobrepasan.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
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 01:54.