::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.