Tema: width: 100% + padding
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/01/2012, 08:30
cfoch
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 16 años
Puntos: 0
Pregunta width: 100% + padding
Hola... desde ayer trato de aprender CSS y me he encontrado con un problema al darle a un div un ancho (width) de 100% con un padding de 10px, por ejemplo.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <style type="text/css">
  4.         #contenedor {
  5.             background: red;
  6.             top: 0px;
  7.             left: 0px;
  8.             width: 100%;
  9.             height: 100%;
  10.         }
  11.         #cabecera {
  12.             background: orange;
  13.             width: 100%;
  14.             padding: 10px;
  15.             height: 80px;
  16.             float: left;
  17.             
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div id="contenedor">
  23.         <div id="cabecera">
  24.             Cabecera
  25.         </div>
  26.     </div>
  27. </body>
  28. </html>

Por ejemplo ahi la cabecera (barra naranja) sobresale del div contenedor debido al padding, ¿cómo puedo hacer para que el padding esté incluido con el 100% de ancho que le doy?
Graicas de antemano