CSS Div porcentaje de anchura y el relleno sin romper el diseño

Question

No pueden ser una solución simple para esto, pero me ha preocupado durante mucho tiempo ahora ...

Voy a explicar la situación. Tengo un div con el 'contenedor' de ID que contiene todos los contenidos de la página (incluido el encabezado y el pie de página también) que mantendrá todo en línea y puedo hacer solo 1 simple 'margin: 0 auto;' en lugar de múltiples Digamos que tengo el ancho de #container configurado en 80%. Ahora si pongo otro div dentro con el mismo ancho (80%) y le doy el ID de 'encabezado' con 10px de relleno alrededor, el diseño se "romperá" (por así decirlo) porque la página agrega la cantidad de relleno a la anchura. Entonces, ¿cómo puedo hacer que permanezca dentro de límites sin usar métodos como un porcentaje menor para el div #header? Básicamente, quiero que sea fluido.

Aquí es un código de ejemplo para darle una idea de lo que estoy hablando ...

CSS

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
} 
#header { 
    position:relative; 
    width:80%; 
    height:50px; 
    padding:10px; 
} 

HTML

<div id="container"> 
    <div id="header">Header contents</div> 
</div> 

Puede alguien ayuda salir con este problema que me ha estado molestando para siempre?

Answer 1

Si desea que el #header a ser la misma anchura que el contenedor, con 10px de relleno, se puede omitir la declaración de anchura. Eso hará que implícitamente ocupe todo el ancho de sus padres (ya que un div es, por defecto, un elemento de nivel de bloque).

Entonces, dado que no se ha definido una anchura en él, el 10px de acolchado se aplica correctamente en el interior del elemento, en lugar de añadir a su anchura:

#container { 
    position: relative; 
    width: 80%; 
} 

#header { 
    position: relative; 
    height: 50px; 
    padding: 10px; 
} 

Se puede ver in action here.

La clave al usar anchuras porcentuales y acolchado/márgenes de píxeles no es para definirlas en el mismo elemento (si desea controlar con precisión el tamaño). Aplique el ancho de porcentaje al elemento primario y luego el relleno/margen de píxeles a un elemento secundario display: block sin ancho establecido.

---

actualización

Otra opción para hacer frente a esto es utilizar la regla box-sizing CSS:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    /* Since this element now uses border-box sizing, the 10px of horizontal 
     padding will be drawn inside the 80% width */ 
    width: 80%; 
    padding: 0 10px; 
} 

Aquí hay un post hablando de cómo box-sizing works.

Answer 2

intente eliminar el position de header y añadir overflow a container:

#container { 
    position:relative; 
    width:80%; 
    height:auto; 
    overflow:auto; 
} 
#header { 
    width:80%; 
    height:50px; 
    padding:10px; 
}