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".