Hola gente!
A ver si alguien se da cuenta dónde está el error. Lo estoy revisando y no logro darme cuenta.
Dejo el código CSS y HTML que me está volviendo loco. Seguro es una pavada, pero ya tengo la cabeza 'quemada' y no me doy cuenta.
Código:
<div id="main">
<div id="productos">
<div class="caja">
<div class="foto">
<img src="imagen01.jpg" alt=""/>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="imagen02.jpg" alt=""/>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="imagen03.jpg" alt=""/>
</div>
</div>
</div>
</div>
Código:
#main{
width:960px;
}
#productos{
float:left;
width: 850px;
padding: 30px 55px 30px 55px;
}
.caja{
float:left;
position: relative;
width: 230px;
padding: 10px 10px 10px 10px;
background: #407086;
margin: 0 50px 10px 0;
.foto{
float:left;
}
La cuastión es que necesito que las tres capas con id="caja" se vean alineadas horizontalmente, con los espacios que le asigné mediante CSS.
Pero por alguna razón la tercer caja se coloca debajo de la primera. Y no entiendo por qué.
Espero que puedan ayudarme. SALUDOS!