lunes, 13 de julio de 2009

Como hacer para que una DIV contenedor detecte un float y se corrija la altura.

Hola pues les voy a poner un post muy útil para aquellos diseñadores o desarrolladores que aman el hacer paginas tableless, uno de los problemas mas frecuentes con el que nos topamos es que tenemos un div contenedor que va conteniedo dentro de si mismos otros divs en la mayoria de los casos, pero muchas veces utilizamos un recurso conocido como Float, el cual pega el div a la izquierda o derecha, ajusta dicho al tamaño del contenido, que pasa cuando hacemos esto que si el div con float crece a lo alto y se pasa del tamaño marcado en los estilos, el div contenedor no detecta su altura y si tenemos un fondo en el contenedor que se esta repitiendo simplemente ya no lo hace más.

la solución a esto era cansada y tediosa, tenias que meter manualmente la altura a cada div con float segun el archivo una altura diferente segun la necesidad.

actualmente con el metodo de CSS y la propiedad :after declaramos una clase le podemos poner como queramos, y esa clase va a tener un comportamiento o una propiedad llamada :after.

esta propiedad lo que le indica a la clase es que despues de todo el contenido de un objeto en este caso nuestro div, ponga un texto, en este caso pondremos un punto, este punto forsara a nuestro div contenedor a estirarse porque estara situado al final del mismo y obio los div ddetectan los textos, y listo se termina el problema de las alturas de los contenedores cuando encierran divs con propiedad float.

Al punto que introducimos lo reducimos en su altura a 0 y le ponemos visible escondido para que no se vea.

les pego el codigo con el respectivo hack para IE saludos:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


Espero les sea super Util XD

1 comentario:

LuisaStar dijo...

adas ya publicadas, pero esta es para corregir este post ya que me percate que no en todos lados funciona y las actualizaciones de IE y FF ya sacaron a este truquito del aire y no sirve más.

La mejor opcion para obligar a un div contenedor a que se ajuste es alfinal de todos nuestros elementos flotantes contenidos poner lo siguiente:

poner un div con un estilo clear:both y listo.

Ciclo de la calidad de Deming