title: How to make CSS width to fill parent?
body: <p>I am sure this problem has been asked before but I cannot seem to find the answer.</p>
  
  <p>I have the following markup:</p>
  
  <pre><code>&lt;div id="foo"&gt;
      &lt;div id="bar"&gt;
          here be dragons
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My desire is to make foo to have width of <code>600px</code> (<code>width: 600px;</code>) and to make bar have the following behaviors: </p>
  
  <pre><code>padding-left: 2px;
  padding-right: 2px;
  margin-left: 2px;
  margin-right: 2px;
  outerWidth: 100%;
  </code></pre>
  
  <p>In other words instead of setting width of bar to <code>592px</code> I would like to set the outer width of bar to <code>100%</code> so that it is computed to <code>592px</code>. The importance here is that I can change foo's width to <code>800px</code> and bar will calculate when rendered instead of me having to do the math for all these instances manually.</p>
  
  <p>Is this possible in pure CSS?</p>
  
  <p>Some more fun with it:</p>
  
  <ul>
  <li>What if <code>#bar</code> is a table? </li>
  <li>What if <code>#bar</code> is a textarea? </li>
  <li><p>What if <code>#bar</code> is an input?</p></li>
  <li><p>What if <code>#foo</code> is a table cell (<code>td</code>)? (Does this change the problem or is the problem identical?)</p></li>
  </ul>
  
  <hr>
  
  <p>So far the <code>table#bar</code>, <code>input#bar</code> has been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a <code>div</code> wrap might work with the <code>div</code> styled to work as borders for the <code>textarea</code>.</p>