title: How to style CSS for input box's width as a percentage when it has border and padding?
body: <p>If the container is 500px wide, and the label is 30% wide, and the input box is 70% wide, then supposedly everything should fit, but the catch is that the input box has a border left and right for 4px, and padding left and right for 2px, making it 6px wider than it is.</p>
  
  <p>We can hack it by making the width not 70%, but 68% or something, but this is somewhat hacky.  Is there a way to handle it?  (We cannot do CSS reset, because the input box does need a border usually, assuming we don't hack it by using outline, which doesn't occupy any space).</p>
  
  <p>The CSS:</p>
  
  <pre><code>#my-container { width: 500px }
  #first-name-label { display: inline-block; width: 30% }
  #first-name { display: inline-block; width: 70% }
  </code></pre>
  
  <p>The following are some examples:</p>
  
  <ol>
  <li><a href="http://jsfiddle.net/hNaM7/12/" rel="nofollow">http://jsfiddle.net/hNaM7/12/</a>   outWidth: 356 (for the input box, as shown in debug console)</li>
  <li><a href="http://jsfiddle.net/hNaM7/13/" rel="nofollow">http://jsfiddle.net/hNaM7/13/</a>   outerWidth 351</li>
  <li><a href="http://jsfiddle.net/hNaM7/14/" rel="nofollow">http://jsfiddle.net/hNaM7/14/</a>   outerWidth 349</li>
  <li><a href="http://jsfiddle.net/hNaM7/15/" rel="nofollow">http://jsfiddle.net/hNaM7/15/</a>   outerWidth 349</li>
  <li><a href="http://jsfiddle.net/hNaM7/20/" rel="nofollow">http://jsfiddle.net/hNaM7/20/</a> won’t wrap, but input box will go
  beyond the width of container</li>
  </ol>