Foros del Web » Creando para Internet » CSS »

Eliminar floats "internos" respetando los "externos"

Estas en el tema de Eliminar floats "internos" respetando los "externos" en el foro de CSS en Foros del Web. Disculpad por el título. Ha sido una forma de definir el problema. Imaginemos 3 DIVs: IZQUIERDA - CENTRO - DERECHA @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver ...
  #1 (permalink)  
Antiguo 03/07/2011, 17:53
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Eliminar floats "internos" respetando los "externos"

Disculpad por el título. Ha sido una forma de definir el problema.
Imaginemos 3 DIVs: IZQUIERDA - CENTRO - DERECHA
Código CSS:
Ver original
  1. IZQUIERDA {float: left; width 200px; }
  2. DERECHA {float: right; width 200px; }
  3. CENTRO {margin: 0px 210px; }
Entonces, si quiero un pie de página que ocupe todo lo ancho, y comience al final de la página, tengo que poner un DIV adicional, con clear: both
Código HTML:
Ver original
  1. <div>
  2.   <div id="IZQUIERDA"></div>
  3.   <div id="DERECHA"></div>
  4.   <div id="CENTRO"></div>
  5.   <div style="clear: both;"></div>
  6. </div>
  7. <div id="PIE"></div>
De esta forma consigo el diseño de las tres columnas y un pie.
Hasta aquí la introducción. Ahora viene el problema.
En la capa CENTRO, donde se ubicará el contenido principal de la página, quiero poner un par de DIVs flotantes para mostrar dos imágenes, y luego seguir con el contenido.
Para ello empleo el mismo "truco": Primeor los dos DIVs flotantes, luego el DIV con clear: both; y finalmente sigo con el contenido.
Al realizar esto, el diseño de la página se rompe por algún motivo.
Pienso que es porqué al añadir este último DIV con clear: both; lo que hace es romper TODOS los floats, y no sólo los de la capa CENTRO.
No se si me explico. Espero que si.
¿Pueden darme alguna sugerencia para solucionar este problema?
Gracias y un saludo.
__________________
..:: moNTeZIon ::..
  #2 (permalink)  
Antiguo 03/07/2011, 18:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Eliminar floats "internos" respetando los "externos"

en lugar del div adicional con clear:both coloca overflow:hidden; al div padre
Código HTML:
Ver original
  1. <div style="overflow:hidden;">
  2.       <div id="IZQUIERDA"></div>
  3.       <div id="DERECHA"></div>
  4.       <div id="CENTRO"></div>
  5.     </div>
  6.     <div id="PIE"></div>
claro esto te funcionara siempre y cuando el div padre no tenga una altura definida
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 04/07/2011, 02:52
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Eliminar floats "internos" respetando los "externos"

Gracias por responder.
Pues la verdad es que no, por suerte, no tiene ninguna altura definida, sino que ésta debería variar en función del contenido de cada página.
Entonces, leyendo tu solución, ¿Debo entender que el "overfloat: hidden" hay que emplearlo en todas aquellas capas que contengan en su interior elementos flotantes?
Por ejemplo, volviendo al caso que he comentado al principio, entiendo que deberían llevar overflow: hidden , tanto la capa que has mencionado, como la capa CENTRO, que a su vez
también tiene en su interior otros DIVs flotantes...
¿Te entendí bien?
Gracias.
__________________
..:: moNTeZIon ::..
  #4 (permalink)  
Antiguo 04/07/2011, 10:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Eliminar floats "internos" respetando los "externos"

así es amigo, la mejor forma que conozco al momento para solventar el problema es colocar overflow:hidden o auto a cada elemento padre que contenga contenido flotante, claro que hay que valorar si es necesario o no, algunas veces con el clear:both en el siguiente elemento se puede solventar, eso si nunca agregar un div o img vació para el clear both.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 05/07/2011, 04:49
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Eliminar floats "internos" respetando los "externos"

Gracias Ag666!
El truco que mencionas funcionó perfectamente.
Un saludo.
__________________
..:: moNTeZIon ::..

Etiquetas: externos, internos
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 14:37.