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.

No comments yet. Be the first.

Leave a reply