Un padding me cambia el tamaño del DIV

B

Tengo el siguiente cajón para noticias:

El problema está en que cuando le aplico un padding-right al div que va a contener el texto, éste se alarga hacia la derecha (el borde del div del cajón del texto se desborda sobre el contenedor).

El código HTML que uso es:

<div class="noticia">
<div class="noticia_top"></div>
<div class="noticia_tail">
Texto de las noticias
</div>
<div class="noticia_bottom"></div>
</div>

Donde:

noticia: especifico la posición y anchura de la noticia.
noticia_top: estilo para la parte superior de la noticia.
noticia_tail: estilo para el cuerpo de la noticia y donde iría el propio texto.
noticia_bottom: estilo para la parte inferior de la noticia.

Y la hoja de estilos:

.noticia{
width: 630px;
border: 1px solid;
float: left;
}

.noticia .noticia_top{
background: url('images/box-top.png') no-repeat;
width: 630px;
height: 20px;

}

.noticia .noticia_tail{
background: url('images/box-tail.png') repeat-y;
width: 630px;
padding: 10px;
border: 1px solid;
}

Entonces, no sé por qué el "noticia_tail" se sale del contenedor general que es "noticia".

oho

El padding aumenta el tamaño del elemento, quitaselo de la achura:

si quieres que conserve 630px de ancho y le metes 10 de padding por todos los lados quitale esos 10 de padding tanto por la derecha como por la izquierda

width: 610px;

padding:10px;

tendrias un div de 630px de ancho.

No entiendas el padding como la distancia donde va a empezar el contenido sino como lo que es, un relleno.

Ejemplo mediavidero:

Si tu novia tiene un tamaño de pecho de 10 cm y se pone un relleno de 5cm, Cuando te pongas a medir con sujetador puesto dará un resultado de 15 cm de pecho aunque el pezon quede a 5cm de este. Si en un hipotético caso tu novia quisese seguir teniendo los 10cm de pecho pero conservando 5cm de distancia al sujetador para evitar rozaduras no quedarian mas cojones que coger un cuchillo y recortar 5cm del pecho original. Con los divs es todo mucho menos sangriento basta con redimensionar con las propiedades width y height.

B

Joder, vaya metedura de pata... Esto es de novato total. :( En fin, es que a veces por muchos manuales que leas hasta que no haces un caso práctico no te das cuenta de esas cosas que obviabas porque las veías una mierda. xD

¡Por supuesto muchas gracias por la respuesta! y por el ejemplo porque donde haya tits todo el mundo lo entiende. xDDDDD

Usuarios habituales