Foros del Web » Creando para Internet » CSS »

Dudas con margin y padding al maquetar

Estas en el tema de Dudas con margin y padding al maquetar en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/08/2011, 18:08
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 2
Dudas con margin y padding al maquetar

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!
  #2 (permalink)  
Antiguo 23/08/2011, 18:50
(Desactivado)
 
Fecha de Ingreso: julio-2009
Ubicación: España
Mensajes: 38
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Dudas con margin y padding al maquetar

Prueba a usar display:inline en las capas para que se muestren en la misma linea.
  #3 (permalink)  
Antiguo 24/08/2011, 06:02
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Dudas con margin y padding al maquetar

Que tal patriarca.

No hay caso, acabo de probar con display:inline y tampoco se alinean.

saludos
  #4 (permalink)  
Antiguo 24/08/2011, 06:15
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 14 años, 2 meses
Puntos: 63
Respuesta: Dudas con margin y padding al maquetar

Buenas

230px ancho de cada caja
A su ves tienen un padding de 10px a cada lado osea 20px

En productos tienes 55px y 30x suman 85

Y tus productos solo aceptan 850px.

Saludos
  #5 (permalink)  
Antiguo 24/08/2011, 06:47
 
Fecha de Ingreso: agosto-2009
Mensajes: 59
Antigüedad: 15 años, 3 meses
Puntos: 2
Respuesta: Dudas con margin y padding al maquetar

Gracias Batan!!!!!!

Era eso, le asigné 960px a #productos y las cajas se alinearon.

Me equivoqué al pensar que por tener padding left y right de 55px había que restarle 110px al width del div..

GRACIAS!!

Etiquetas: dudas, html, maquetar, margin, padding, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:36.