problemas con alineamiento de capas

[rgallardo]

Hola, estoy haciendo mi primera pagina web y decidi maquetar usando capas <div>.
Pero no logro alinear como yo quiero.
Tengo 6 capas distribuidas de la siguiente manera:

1: Div #menu: esta capa esta a la izquierda y tiene un menu

2: Div #foto: esta div se encuentra al lado derecho de #menu y contiene una foto grande

3: Div #foto1: es una foto pequeña, esta debajo de la foto grande #foto y a la derecha del #menu

4: Div #foto2: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto1

5: Div #foto3: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto2

6: Div #foto4: es otra foto pequeña esta debajo de la foto grande #foto y a la derecha de #foto3

Bueno, no he podido lograr que las 4 fotos pequeñas se ubiquen debajo de la foto grande y al lado derecho de #menu

Ojalá me puedan ayudar

[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>
 

[rgallardo]

Excelente!!! me funciono muchas gracias.

Un solo problemilla que se me generó, pero fue culpa mia por no mencionarlo cuando plantee la situacion.

Resulta que tengo otra capa que se llama #descrip, en la cual coloco texto y esta a la derecha de la Foto grande #fotoG. Cuando puse las div como me indicaste, se me descuadro la capa #descrip, se fue hacia abajo ¿como puedo dejarla al lado derecho de la foto grande?

[lubtufano]

Prueba con esta modificación.

Código CSS:

<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;
float: left;
}
 
#descrip {
width: 200px;
height: 250px;
background-color: #ff0;
float: left;
}
 
#foto1 
{
width: 100px;
height: 100px;
background-color: #ccc;
float: left;
clear: left;
}
 
#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="descrip">Descripci&oacute;n</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>
 

Lo que se hizo fue agregar la propiedad 'float:left' a <div id="fotoG"> con lo cual el <div id="descrip"> es forzado a alinearse al lado de este; además, los estilos de la primera imagen pequeña se declaran por separado incluyendo en estos la propiedad 'clear:left' lo que provoca que este <div> se posicione en la siguiente linea limpia a su izquierda, el resto de <div> contenedores de imagenes pequeñas son colocados al lado del primero con la propiedad 'float:left'.
Por último te recomiendo, por si no lo haz hecho, que pongas al declaración DTD la comienzo de tu página, ya que con esto la compatibilidad de los estilos con diferentes navegadores sera mejor.

[rgallardo]

Muchas, muchas gracias.......me funcionó perfecto!!

[rgallardo]

Estimado lubtufano, disculpa por preguntar tanto, pero tenias razon con el tema de la compatibilidad ¿que problema ese no? la pagina se ve muy bien tanto en Firefox como el Chrome, sin embargo, las fotos pequeñas no aparecen en IE.
En la página principal coloco <!DOCTYPE html> ¿conoces de alguna otra cosa que me ayude a que la pagina se vea en IE?

Gracias

[Batan]

Puedes que sea por no finalizar bien la etiqueta img. Tienes que acabar asi

Código:

<img src="TuImagen.png" alt="Descripción" /> 

Tambien podrias pensar en el usar la propiedad z-index, si estas colocando una capa por encima de las imagenes.

Código CSS:

img{
z-index: 1;
}
 

Saludos