Capas encima de una capa (problema)

Ante todo agradezco todo el trabajo realizado sin animo de lucro, muchas gracias!

Referente al problema
[contenido no disponible]

Como se puede observar en la foto, hay div's o capas que se situan incorrectamente, me refiero a aquellas capas que no se pegan en la esquina de la capa contenido.

Asi tengo definido la hoja de estilos:


#foto {margin: 40px 0px 0px 0px; float: left ; background-color: red}
#foto a:hover {background-color: white}

#fotouno {margin: 40px 0px 0px 0px; float: right ; background-color: green }
#fotouno a:hover {background-color: white}

#fotodos {margin: 80px 0px 0px 0px ; float: left ; background-color: black }
#fotodos a:hover {background-color: white}

#fototres { margin: 80px 0px 0px 0px ; float: right ; background-color: brown}
#fototres a:hover {background-color: green}

#fotocuatro { margin: 160px 0px 0px 0px ; float: left; background-color: yellow}
#fotocuatro a:hover {background-color: white}

#fotocinco {margin: 160px 0px 0px 0px ; float: right ; background-color: blue}
#fotocinco a:hover {background-color: white}

____________

Sobre las listas, me gustaria que en aplicar text-align: center quedaran bien estructuradas , es decir , tipo como esto:

-Tratamiento Aire comprimido
-Filtración de Proceso
-Enfriadoras de agua Industrial

Y no esto:

-Tratamiento Aire comprimido
-Filtración de Proceso
-Enfriadoras de agua Industrial




Gracias

Perdonad, el foro corrige la forma escrita cuando digo: "Y no esto". La estructura "Y no esto" es como en la foto.

que es lo que quieres hacer?? alinearlas a la izquierda? pon la propiedad float: left en los estilos

La idea es tener 3 div's en la izquierda y 3 en la derecha para incluir en cada div una foto, el problema se presenta despues de #fotouno que el siguiente div deja ese espacio, cada div tiene asignado su float:left y right.

Y si metes 3 "DIV's"?, una para las fotos de la izuierda,otra para el contenido y otra para las fotos de la derecha

Mira esto ya lo he explicado antes, primero:

Creamos un div un poco mas ancho que tu imagen y lo suficientemente largo para que las tres imagenes quepan dentro con todo y su separacion... creamos este div y le ponemos el respectivo float left... despues tomamos los otros divs (foto1 etc...) y los ponemos dentro del div alargado para que los obligue ha estar uno debajo de otro, y solo le das un margin para separarlos un poco, para el de la derecha haz lo mismo solo pon un float right :wink:

ROYGES estupenda idea me ha ido de fabula. Ahora solo falta la lista y ya estara de coña :D.

Una duda como hago para dejar un espacio?

ponle a cada div margin: 5px 0px 0px 0px

puedes editarlo, eso dejara espacio de 5 px por arriba