He estado investigando un poco y resulta que el problema del margen en elementos con overflow hidden tiene su explicación. También tiene una solución sencilla.
DESCRIPCIÓN Tenemos un elemento que se debe de expandir para contener a los floats que tiene en su interior. Pero, a su vez, este elemento está junto a otros flotantes. Para que se produzca esta expansión, establecemos la propiedad overflow en hidden (también vale auto). El problema surje cuando este elemento está junto a flotantes (no confundir con los flotantes internos) y, además, le añadimos un margen para crear un efecto de columna. Entonces, unos navegadores (ej. IE7 o Firefox3 bajo Windows) calculan este margen desde el borde de la caja que contiene a este elemento (y a los floats adyacentes), mientras que otros (ej. Opera, Safari, Firefox en Linux) lo calculan desde el límite de los floats laterales. - Al parecer, la mayoría de los navegadores modernos calculan los márgenes del elemento con overflow:hidden desde los bordes de las caja flotantes que pudieran tener a su lado. ¿QUÉ DICEN LAS ESPECIFICACIONES? Establecer la propiedad overflow a hidden (o cualquier valor distinto de visible) hace que que se genere un nuevo contexto de formato de bloque [1]. CSS2.1 impide que el elemento con este nuevo contexto se solape con los flotantes. Para ello da la opción de que la caja se haga más estrecha o bien limpie los flotantes pasando a estar debajo de ellos [2]. En CSS3 sucede lo mismo. En CSS2 no he visto nada. Por lo tanto, según esto, ni Internet Explorer 6 y 7 ni Firefox bajo Windows siguen la especificación CSS2.1 en adelante, ya que contraen el contenido inline del elemento, pero no la caja, que se solapa con los flotantes laterales y, como consecuencia, calculan mal los márgenes. SOLUCIÓN Para que el comportamiento sea congruente con los diferentes navegadores, la solución no podía ser más sencilla: * Envolver el elemento con overflow:hidden dentro de otro y establecer los márgenes sólo al elemento padre. Aunque se puede alegar que esto añade marcado no semántico (una etiqueta nueva sólo para añadir márgenes), hay que tener en cuenta que no se aplica a todos los elementos con overflow:hidden, tan sólo a los que estén posicionados junto a floats y queramos que tengan un margen para crear el efecto de columna. Además, según el caso, puede que este elemento padre ya estuviese creado, con lo que sólo añadiríamos el margen en las css. Saludos Referencias [1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting [2] http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float El 4 de marzo de 2009 20:22, Martin Etxauri <t...@eragin.com> escribió: > Aupa > > No se si la mayoría por aquí conoceréis esto que mando pero ahí va. > No convencido del famoso <br> limpiador con el clear:both para cerrar > bien las capas que contienen elementos flotados y que no sobresalgan > por encima de estas, he encontrado un artículo [1] donde explican > varios métodos y señalan uno como definitivo (o al menos el mejor en > su opinión), y es tan simple como ponerle a dicha capa (la contenedora > de los elementos flotados) overflow: auto; > > Yo personalmente he alucinado con el tema y me parece que funciona muy > bien. En el mismo artículo advierte que con algunas combinaciones de > margin y padding pueden salir algún scroll pero es cuestión de tener > cuidado. > > Espero que sea de utilidad > > saludos > > > [1] http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
