Pequeño truco que saqué de un libro para ajustar el css cuando tenemos elementos float sin hacer uso del clear.
Partimos de un contenedor con la propiedad border y dos elementos con propiedad float.
<div id="contenedor"> <div id="izquierda"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante. </div> <div id="derecha"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus. </div> </div>
#contenedor { border: thick solid #000; } #izquierda { float: left; width: 40%; } #derecha { float: right; width: 40%; }
Observamos que la imagen inferior es lo que suele ocurrir. El navegador no puede ajustar el contenedor a los elementos una vez estos hacen uso de la propiedad float.
Podemos hacer uso de un div que contenga la propiedad clear : bloth;
<div id=»contenedor»>
<div style=»clear: both»></div>
</div>
Con lo cual obtendríamos un resultado similar al de la imagen inferior :
Y esto nos solucionaria la papeleta, pero llega un momento que aparte de tener elementos vacíos, el usar varios floats nos puede despistar y que los elementos no se comporten como esperamos.
Hay otra solución, que aparte de ahorrarnos unas lineas, asi como elementos vacíos, funciona correctamente en cualquier navegador :
Supongo que eso obliga al contenedor a ajustarse al tamaño minimo disponible, osea, se ajusta al tamaño de los elementos que contiene.
El ejemplo esta extraído, tal cual, de este libro, que además os podeis descargar.
Ale, que vaya bonito! 😉