title: CSS Contain input text to 100% width
body: <p>So when I set the input like this example the text box, because it has a border and padding by default, will be wider than 200px. </p>
  
  <pre><code>&lt;div style="width:200px; background-color:red;"&gt;
      &lt;input type="text" name="fname" style="width:100%;"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know I can force the text box to fit within the 200px by setting a class to the input tag and tagging it with this CSS</p>
  
  <pre><code>-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;    
  box-sizing: border-box;
  </code></pre>
  
  <p>Is there a better way to get this text box to size correctly, i.e. to fill 100% as I want it to do? I cannot use fixed sizes. I am using CSS themes so the text box padding, margins, etc are not known at compile time. They can be changed out by the user on the fly. So the solution must work regardless of what the text box's padding, border, and margin is.</p>