shrink div with padding or margin

Question

What I'm trying to do is the following.

I have a div with a fixed height, lets just say its 100px.
What I want is a div within this 100px div with a height of 100% but then 10px shorter at the top and bottom.
So the result will be a wrapper div with a 100px height and a div within this wrapper div which starts 10px from the top and ends 10px from the bottom (i.e. height:80px).
The problem is that I'm getting a div which has a total height of 120px.

Note: only html css solutions
Note2: the div inside the wrapper has a height of 100%

CSS and HTML

#t{
  height:100px;
  width:5px;
  background: blue;
}

#e{
  height:100%;
  width: 5px;
  padding-top:10px;
  padding-bottom: 10px;
  background: yellow;
}

#s{
  height:100%;
  width: 5px;
  background: gray;
}

<div id="t">
  <div id="e">
    <div id="s">
    </div>
  </div>
</div>

Here's the JSfiddle I've been playing with http://jsfiddle.net/MWUsM/2/

Answer 1

You're looking for the CSS box-sizing property border-box

The box-model specifies the rendered width/height of the element as specified width/height + padding + border, and to subtract the padding and border properties from this sum, the CSS3 specification adds box-sizing

Updated example

Chris Coyier has a nice and detailed article

For cross browser support, it's suggested you add the prefixes as follows:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;