Elemento 100% ancho en contenedor

[YolandaGC]

Hola,
quiero que el pié de página sea 100% de ancho(que ocupe toda la pantalla) pero está metido dentro del contenedor que ocupa 960px de ancho.
Cómo puedo hacerlo?
¿Tiene que estar cerrado el contenedor antes del elemento que quiero al 100% o puedo pasarlo por encima?

Saludos.

[pzin]

Para no complicarte las cosas, lo ideal es sacarlo del contenedor si.

[YolandaGC]

Aún así parte del pié se me a la derecha, no entiendo porqué si lleva un ancho 100%. se ve la barra scroll: http://nuevaweb.joanandreu.com/

[pzin]

Es porque le aplicas un padding, y según el modelo de caja de CSS, el ancho total es igual al ancho del elemento, más el borde y el padding. De ahí que sobresalga.

La forma más fácil de solucionarlo, es cambiando ese modelo de caja para ese elemento para que padding no forma parte del ancho del elemento:

Código CSS:

div#footer-bottom {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Para Firefox */
}
 

En principio así funciona en todos los navegadores modernos, incluído IE8. Consulta el soporte para los diferentes navegadores: http://caniuse.com/css3-boxsizing

[YolandaGC]

Gracias pzin, pensaba que el padding me lo encogía hacia adentro y no hacia afuera.
Siempre me lío con esto.
¿Qué hace exactamente el box-sizing?
Si lo dejo sin padding y sin box-sizing sigue funcionando bien.

[pzin]

Hace que el padding vaya hacia adentro.