padding adentro css ¬¬

no se si e vivido engañado, pero almenos yo aprendi, y sino recuerdo mal asi dicen mis libros que

el padding se mide asia dentro del div, y el margin asia afuera...
asi es facil ponerle a un div

width:100%
padding:100px

y dginificaria que el div abarca todo el ancho, y el contenido estaria a 100 px de los bordes del div, no?

pues resulta que ahora que utilizo esta tecnica, me añade el padding al exterior del div..
dejandome un width de 100% +200px que me arruina mis diseños

y el problema no seme presenta en ie, sino en chrom, y firefox.. y ...y.. en todo? wtf!!

e vivido engañado? hay forma de forzar el padding asia dentro?

ahora para conseguir el mismo efecto de pagind asia dentro tengo que usar 2 divs, y no uno, y eso es muuy molesto

editando ____________________________________________
ok... estoy realmente confundido.
me puedo adaptar a que el padding sea asia fuera... tal vez asi fue siempre y algun momento me confundi.. pero ahora no comprendo que pasa! D=

mi html es esto

Citar

<head>
<link type="text/css" href="base.css" rel="stylesheet" />

</head>
<body>
<div id='head'></div>
<div id='menu'></div>
<div id='head2'>{% block content_title %}{%endblock%}</div>

{% block content %}{%endblock%}

<div id='pie'></div>
</body>

y mi css esto

Citar

body{
word-wrap:break-word;
}
#head{
   width:100%;
   height:200px;
}
#menu{
   padding-top:20px;
   padding-bottom:20px;
   width:100%;
   background:#222;
}
#head2{
   width:100%;
   background-color:##add058;
   min-height:20px;
}

por que me deja espacios D=

body{
word-wrap:break-word;
margin:0px;
}
#head{
width:100%;
height:200px;
}
#menu{
padding-top:20px;
padding-bottom:20px;
width:100%;
background:#222;
}
#head2{
width:100%;
background-color:##add058;
min-height:20px;
}

body{
margin:0;
word-wrap:break-word;
}
#head{
width:100%;
height:200px;
}
#menu{
padding-top:20px;
padding-bottom:20px;
width:100%;
background:#222;
}
#head2{
width:100%;
background-color:##add058;
min-height:20px;
}