title: Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?
body: <p>I want to be able to layout nested divs with these properties:</p>
  
  <ul>
  <li><code>width: 100%</code></li>
  <li><code>height: 100%</code></li>
  <li><code>padding: 10px</code></li>
  </ul>
  
  <p>I want it to be such that, the children are 100% width and height of the <em>remaining</em> space <em>after</em> padding is calculated, not before.  Otherwise, when I have a document like the below example, the child makes the scrollbars appear.  But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.</p>
  
  <p>I can use all <code>position: absolute</code> declarations, but that doesn't seem right.  Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=7"&gt;
      &lt;title&gt;Liquid Layout&lt;/title&gt;
      &lt;style&gt;
        body, html {
          width:100%;
          height:100%;
          margin:0;
          padding:0;
          background-color:black;
        }
        #container {
          position:relative;
          width:100%;
          height:100%;
          background-color:red;
          opacity:0.7;
        }
        #child1 {
          position:relative;
          width:100%;
          height:100%;
          padding:10px;
          background-color:blue;
        }
        #nested1 {
          position:relative;
          background-color: white;
          width:100%;
          height:100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;div id="child1"&gt;
          &lt;div id="nested1"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I make it so, using <code>position:relative</code> or <code>position:static</code>, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins?  Do I have to resort to <code>position:absolute</code> and left/right/top/bottom?</p>
  
  <p>Thanks for the help,
  Lance</p>