title: Position textarea at bottom of div and fill to (width - 2px margins)
body: <p>I thought we were mostly past this sort of thing, but I've discovered an inconsistency (presumably well-known to all you CSS demi-gods out there) in how Firefox and IE display something vs. Chrome.</p>
  
  <p>Take a look at this jsfiddle here: <a href="http://jsfiddle.net/smithkl42/jmgEV/1/" rel="nofollow">http://jsfiddle.net/smithkl42/jmgEV/1/</a></p>
  
  <pre><code>div.parent{
    position:relative;
    height:200px;
    width:400px;
    background-color:blue;
  }
  
  textarea.child{
    position:absolute;
    height:30px;
    bottom:2px;
    left:2px;
    right:2px;
  }
  </code></pre>
  
  <p>In Chrome it does what I want it to, namely, to display the <code>&lt;textarea&gt;</code> at the bottom of its parent div, and be as wide as the parent div. But in FireFox and IE, it ignores the <code>right:2px</code> line, and just gives it the default width.</p>
  
  <p>If I replace the <code>&lt;textarea&gt;</code> with a <code>&lt;div&gt;</code> (see <a href="http://jsfiddle.net/smithkl42/jmgEV/2/" rel="nofollow">here</a>, it behaves the way I want.</p>
  
  <p>Any idea why?</p>
  
  <p>EDIT: 
  Thanks for all the suggestions. I should note that the parent element (in the real world, not in my fiddle) is gonna be changing size, so I can't use any of the suggestions that say, "Just set the width manually". For instance, I need it to be <em>exactly</em> two pixels from the left and right edges whether its parent element is 1200 pixels wide or 50. So things like setting it to a %, which would work it if was mostly fixed-width, won't work here. For other comments, see below.</p>