problemas con alineamiento de capas

[lubtufano]

Me parece que lo más conveniente es colocar los <div> que contienen las imagenes dentro de un <div> mayor y dar a la propiedad overflow de este <div> el valor hidden y a la propiedad height el valor -1%, además a los <div> que contienen las imagenes que van debajo de la imagen mayor se les da el valor left en la propiedad float. Dejo el siguiente código para que lo pruebes.

Código SQL:

<STYLE TYPE="text/css">
#menu {
width: 150px;
height: 500px;
FLOAT: LEFT;
background-color: #366;
}
 
#imagenes {
height: -1%;
overflow: hidden;
}
 
#fotoG {
width: 400px;
height: 250px;
background-color: #fc0;
}
 
#foto1, #foto2, #foto3, #foto4 {
width: 100px;
height: 100px;
background-color: #ccc;
FLOAT: LEFT;
}
 
.imagen {
width: 95%;
height: 95%;
}
</style>
 
<div id="menu">menu</div>
<div id="imagenes">
<div id="fotoG"><img src="" class="imagen" alt="imagen_grande"></div>
<div id="foto1"><img src="" class="imagen" alt="imagen_chica_1"></div>
<div id="foto2"><img src="" class="imagen" alt="imagen_chica_2"></div>
<div id="foto3"><img src="" class="imagen" alt="imagen_chica_3"></div>
<div id="foto4"><img src="" class="imagen" alt="imagen_chica_4"></div>
</div>