al contrario, marquetar con div garantiza mayor compatibilidad con los navegadores, el problema como siempre es el IE, para eso existen técnicas para "limpiar los floats", la mas usuales:
en el contenedor:
overflow:
auto o
hidden //me ha funcionado con Firefox, Ie, chrome y safari
height: 1%; //funciona en la mayoría
ejemplo:
(no recuerdo exactamente de donde lo saqué)
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#contenedor {
border: thick solid #000;
padding:4px;
/*Correccion avanzada:*/
overflow: hidden; /*auto también funciona*/
height: 1%;/*SOLUCION FINAL TODOS LOS EXPLORADORES VÄLIDA*/
}
#izquierda {
float: left;
width: 40%;
border: 1px solid blue;
}
#derecha {
float: right;
width: 40%;
border: 1px solid red;
}
/* TECNICAS PARA EXPLORER 6 E INFERIOR:
/* Funciona correctamente con cualquier navegador
#contenedor {
border: thick solid #000;
overflow: hidden;
width: 100%;
}
/* Funciona correctamente con cualquier navegador
#contenedor {
border: thick solid #000;
overflow: hidden;
height: 1%;
}
/* La propiedad zoom no es parte del estándar CSS, por lo
que esta hoja de estilos no validaría
#contenedor {
border: thick solid #000;
overflow: hidden;
zoom: 1;
}
/* El truco del guión bajo delante de las propiedades CSS sólo
lo interpreta correctamente la versión 6 de Internet Explorer
#contenedor {
border: thick solid #000;
overflow: hidden;
_height: 1%;
}
*/
</style>
</head>
<body>
<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>
<!-- CORRECCION SIMPLE <div style="clear: both"></div> -->
</div>
</body>
</html>