Posted on may 18, 2006

Resolviendo el problema del min-width

Problema

Queremos posicionar, sin utilizar tablas y con CSS, dos imágenes alineadas horizontalmente (a la misma altura), de forma la de la izquierda esté siempre pegada a la izquierda y la de la derecha siempre pegada a la derecha (aunque la ventana se redimensione).

Utilizando el atributo float o display inline en las imágenes conseguimos que queden alieneadas horizontalmente, pero cuando el tamaño de la ventana del navegador se reduce hasta ser menor que la suma del tamaño de las imágenes, entonces una de las imágenes queda posicionada debajo de la otra :(

Esto se resuelve normalmente con el atributo min-width que permite definir un DIV que englobe a las imágenes y que no vea reducido su tamaño por debajo de un valor definido de pixels. El problema es que esto no funciona en IE, ya que no reconoce este atributo.

Solución

En este artículo http://www.cssplay.co.uk/boxes/width.html podemos ver un ejemplo de como resolver este problema utilizando una solución 100% CSS.

Y aquí, otro ejemplo un poco más limpio y reducido.

Posted on may 18, 2006

Position is Everything

En http://www.positioniseverything.net/ podeis encontrar un excelente repositorio de artículos y demos que tienen como objectivo explicar y resolver las diferencias de implementación, en cuanto a CSS, que existen entre los navegadores existentes.

Se tratan aspectos como trasparencias y PNG, boxing, posicionamiento, uso de CSS en lugar de tablas para maquetación, etc.