title: Is it possible to style a text input to fill the width of it's parent?
body: <p>I have had this issue for years and I've seen similar questions before, but none of them have addressed the fact that when setting <code>width: 100%</code> on an element - paddings, margins and borders will <em>increase</em> the width.</p>
  
  <hr>
  
  <p>Have a look at this <a href="http://jsfiddle.net/qfUre/6/">Fiddle</a>.</p>
  
  <p>The white topmost text box is a standard text box with it's width set to <code>100%</code>. As you can see it overflows it's parent because of the margin, padding and border settings.</p>
  
  <p>The green text box is styled like a div using <code>position: absolute</code>. This works like a dream in webkit browsers but nowhere else.</p>
  
  <p>The red div is the control - I want the input to act <strong>just like that</strong>.</p>
  
  <hr>
  
  <p>Are there any hacks/tricks I can employ to have my text inputs act just like the red div in all modern browsers, in other words, fit inside the padding of the parent? Please edit my Fiddle or create your own to accompany your answer. Thanks!</p>