Position textarea at bottom of div and fill to (width - 2px margins)

[hoslxos]

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.Take a look at this jsfiddle here: http://jsfiddle.net/smithkl42/jmgEV/1/\[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\]In Chrome it does what I want it to, namely, to display the \[code\]<textarea>\[/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.If I replace the \[code\]<textarea>\[/code\] with a \[code\]<div>\[/code\] (see here, it behaves the way I want.Any idea why?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 exactly 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.