Problemas al flotar contenido
Existen ocasiones en las que necesitamos tener un diseño en dos columnas para mostrar elementos, imágenes párrafos, etc.
Para tener estas dos columnas existen múltiples opciones, pero una de las más comunes es crear un contenedor padre y unos elementos hijos. Estos elementos tendemos a flotarlos para conseguir este efecto de columnas ordenado. Al flotar el contenido que se encuentra dentro de nuestro contenedor padre podemos sufrir un desbordamiento.
El problema:
Tenemos dos contenedores hijos llamados “izquierda” y “derecha” contenidos dentro de un div padre llamado “container”.
Cuando flotamos los elementos que se encuentran dentro del div “container”, el padre tiende a adaptarse al contenido, como el contenido se encuentra flotado no tiene nada a lo que aferrarse y nos puede aparecer un pequeño desastre como el que tenemos en la imagen.
Queremos que nuestro div#container rodee ambos párrafos. Para corregir este pequeño desastre al contenedor le aplicaremos una propiedad css.
La solución:
div#contenedor {overflow:hidden;}
Observaremos que tanto en Firefox, como en Opera, Safari o incluso IE7 esta propiedad funciona y el padre se amolda al contenido de los hijos.
Encontraremos un pequeño problema a la hora de visualizarlo en la versión 6 de Internet Explorer y es que al aplicar la propiedad css es como si no hubieramos hecho nada.
La solución para IE6:
Al aplicarle el overflow, IE6 necesita un ancho específico para poder rodear correctamente los elementos flotados. De esta manera si le aplicamos un width ya sea en píxeles o porcentaje el contenedor padre rodeará a los hijos como deseábamos desde el principio. Al resto de navegadores este ancho no les afectará en nada y de este modo sólo será una propiedad más dentro de nuestro css.
El resultado final sería este:
div#contenedor {overflow:hidden; width:100%;}
div#izquierda {float:left;}
div#derecha {float:right;}
Hombre, pequeño saltamontes, ayudando a expandir el conocimiento! ;-P
Que sepas que la explicación técnica de porqué en IE funciona al añadir el width 100%, es porque necesita que se active la propiedad “hasLayout” en ese infernal navegador para el elemento en cuestión.
Dicho esto, si, como ocurre algunas veces, el contenedor para el que quieres expandir a elementos flotados tiene padding, el width 100% te da bastante por *ulo. Por lo que debemos buscar alguna propiedad más que dispare el “hasLayout”. Lo bueno (y lo malo) es que hay propiedades propietarias (qué mal ha sonado eso) para hacer eso, como por ejemplo “zoom”.
Prueba a poner zoom:1 en vez de width:100% a ver qué pasa.
Y si es lo que necesitas, lo pones en una hoja de estilos específica para IE con “conditional comments” y no ensuciamos nuestra pristina hoja de estilos excepto para el odiado navegador que todos conocemos.
Besitos!
Le estuve echando un ojo al “haslayout” y quería escribir un artículo con las propiedades que afectan o que no afectan a ese navegador. El display:inline o block, width, zoom o incluso aquel famoso position:relative que tenemos que aplicar cuando nos desaparece el contenido en IE6.
Espero que te pases más por aquí ya que siempre son bien recibidas tus noticias, y más cuando aportas contenido adicional e interesante.
Alabado sea tu conocimiento.
Un saludo!
hola
yo lo que necesite es hacer flotar un div encima de otro sin que se mueva o extienda ninguno :S para meter publicidad alli, puedes pasar por mi web para darme una mano? te lo agradeceria mi sitio es maestrosdelblog gracias!