El problema es que al flotar ambos <div> es como si el <div> que los contiene quedara «vacío». Antes se usaba el famoso «Clear-fix», pero no voy a entrar en detalles. Lo que tienes que hacer es al <div> contenedor colocarle el siguiente código CSS:
Código CSS:
Ver originaldiv#alrededor {
overflow: hidden;
height: 1%;
}
Y listo. Tendría que funcionar. Sé que el código que pusiste es sólo de ejemplo, pero te recomiendo lo siguiente:
1: Agrupa sentencias, para no repetir en vano ciertas propiedades.
2: Se más específico en el CSS, te evitará muchos problemas, y siempre sabrás a qué elemento estás haciendo referencia.
Código CSS:
Ver originaldiv#alrededor {
background-color:#009900;
/* New */
overflow: hidden;
height: 1%;
/* New */
margin-left:auto;
margin-right:auto;
width:960px;
position:relative;
}
div#alrededor div#izquierda,
div#alrededor div#derecha {
background-color:#F8F8F8;
width:260px;
height:100%; /* Si haces esto no lograrás que ocupe el 100% del alto de su contenedor, por lo que es absurdo colocar este valor, ya que este <div> siempre tendrá SU PROPIO 100% producto del contenido que contenga.*/
float:left;
}
div#alrededor div#derecha {
background-color:#F8F8F8;
width:700px;
}
Espero que te sirva, ¡saludos!