xml-utils.com

Cuando queremos tener un DIV que contenga otros dos, los cuales son de tipo float, y queremos que el DIV contenedor represente un borde, nos encontramos con este problema:

div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}

Y es que el DIV contenedor no se acomoda para albergar correctamente a los dos DIV de tipo float.

Una solución es añadir un DIV extra con el atributo clear: both, pero no es del todo correcto añadir nuevos atributos a la página cuando estos no son necesarios.

Otra solución, comentada en este artículo, sugiere una modificación del código CSS para corregir este defecto. Esta corrección pasa por alterar el atributo overflow del DIV contenedor a hidden y establecer el tamaño global al 100%:

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}

Así conseguimos el efecto deseado.

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.

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.