title: Textbox Height 100% When Parent Div has Margins
body: <p>Browsed some related questions but none seemed to answer mine.</p>
  
  <p>I have something like the following:</p>
  
  <pre><code>&lt;div id="outerdiv" style="width: 50%; height: 100%"&gt;
      &lt;div id="innerdiv" style="margin: 5px; height: 100%"&gt;
           &lt;textbox&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the textbox to take up the full space of the inner div that has margins. Two problems:</p>
  
  <p>If the inner div has height 100%, it overflows because it has margins. I can't have padding on the outer div because the outer div then overflows it's parent etc. The whole layout is a square with four equal sub-squares where each subsquare is like the markup above.</p>
  
  <ol>
  <li>So how can I get the innerdiv to take up the full height but still have the margin I want?</li>
  </ol>
  
  <p>If I set the textbox to 100% width and height, again the margin causes problems and the textbox overflows.</p>
  
  <ol>
  <li>How can I make the textbox take up the full space without overflowing? </li>
  </ol>
  
  <p><strong>Edit</strong>:</p>
  
  <p>Fiddles:
  use this as base and add an outer div with a fixed width and height to see my problem:
  <a href="http://jsfiddle.net/7w8TA/" rel="nofollow">http://jsfiddle.net/7w8TA/</a></p>
  
  <p>This is a fiddle I created myself but I'm not sure if it's public or not... : <a href="http://jsfiddle.net/LethalLava/mY6Dn/" rel="nofollow">http://jsfiddle.net/LethalLava/mY6Dn/</a></p>