Foros del Web » Creando para Internet » CSS »

Capa se expande al añadir padding

Estas en el tema de Capa se expande al añadir padding en el foro de CSS en Foros del Web. Hola compañeros, actualmente estoy maquetando mi web y resulta que en el contenedor principal donde quiero que vaya la información deseo que haya un determinado ...
  #1 (permalink)  
Antiguo 16/07/2009, 02:33
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Pregunta Capa se expande al añadir padding

Hola compañeros, actualmente estoy maquetando mi web y resulta que en el contenedor principal donde quiero que vaya la información deseo que haya un determinado padding, pero cuando hago esto el padding se realiza en la izquierda, arriba y abajo, pero en la derecha, en vez de hacer el padding me estira la capa y me deforma la web. Os dejo una imágen para que veais a que me refiero.

img200.imageshack.us/img200/1658/padding.jpg

El estilo de la capa Main (la de la izquierda en la que resulta el problema):

Código:
#main{
background: url(../backgrounds/main.png) no-repeat;
background-color: black;
text-align: justify;
font-family: 10px 'Trebuchet MS', Helvetica, sans-serif;
color: white;
max-width: 481px;
min-height: 477px;
padding: 5px;
float: left;
}
El estilo de la capa Detail (la de la derecha):

Código:
#detail{
background: url(../backgrounds/detail.png) no-repeat;
background-color: black;
text-align: center;
font-family: 10px 'Trebuchet MS', Helvetica, sans-serif;
color: white;
width: 269px;
min-height: 477px;
float: left;
}
Y el estilo de la capa contenedora:

Código:
#center{
background-color: black;
width: 750px;
min-height: 621px;
float: left;
}
Espero que me podáis ayudar.

Un saludo!
  #2 (permalink)  
Antiguo 16/07/2009, 02:49
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Capa se expande al añadir padding

Si tu pones un padding, el tamaño del contenedor aumenta tantos pixeles le hayas puesto en los padding.

Si le pones un padding de 10px a todos los lados, te crecerá 20px de ancho y alto. Es por eso que te empuja el contenido hacia abajo. Para solucionarlo simplemente reduce el tamaño del contenedor donde le has puesto el padding.

Si media 180 y le das 10 de padding por cada lado, en total le das 20, por lo tanto lo deberías rebajar a 160.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 16/07/2009, 02:58
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Capa se expande al añadir padding

Es una solución que la verdad no había pensado pero que es correcta. De todas formas, creo que otras veces he hecho esto mismo que puse en el código y, como la capa tiene un ancho concreto el padding lo único que hace es dejar un hueco sin deformar la capa. Quizás me equivoco.

Muchas gracias hades!
  #4 (permalink)  
Antiguo 16/07/2009, 03:01
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Capa se expande al añadir padding

Eso sería por que el contenedor donde tienes todo es suficientemente ancho para permitir el desplazamiento de la contigua, pero en este caso no debe de ser así
__________________
No diseñes usando tablas.
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 20:16.