Eso es un problema muy comun en css, el tema es que los elementos que posicionas con float se salen del flujo del documento, la palabra lo dice, estan flotados y a su vez la propiedad float tambien afecta a sus contenedores, hay dos maneras de solucionarlo, flotando el div central, lo que tal vez no te serviria. Lo mas comun es que debajo de esos dos elementos flotados, coloques un div vacio, al cual con css le vas a dar la propiedad clear:left, de esta manera el div contenedor, va a hacer eso, contener a los flotados.
Ejemplo:
Código:
<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" type="text/css" media="all" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<div id="derecha"></div>
<div id="izquierda"></div>
<div id="clear"></div>
</div>
</body>
</html>
</div>
En el css:
Código:
#contenedor{
width:900px;
background-color:blue;
margin:auto;
}
#derecha{
float:left;
width:400px;
height:200px;
background:red;
}
#izquierda{
float:left;
width:400px;
height:200px;
background:green;
}
#clear{
clear:both;
}
Hay otras maneras de hacerlo, esta no es la mejor, ya que utilizas un div vacio.