Reputation: 188
I think i'm doing something wrong here, I expect the textarea to be 10px smaller than the parent div on every side, but it's not like that, it's too small:
<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
</div>
</html>
jsfiddle: http://jsfiddle.net/2a7LR/1/
why does this happen ? and how can i make it so it fits 10 px smaller in each side from the parent div ?
It appears correctly only in chrome/safari, but wrong in every other browser ( firefox, opera, IE8 )
Upvotes: 5
Views: 13306
Reputation: 2610
<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>
This should work for you. the text area can be relative inside a absolute div. you just need to position it with margins and not with top and left.
Cheers, Fede
EDIT: and also noticed you haven't set any width and height in the text area so it's not suppost to know the size of it - it just puts the default .
Upvotes: 2
Reputation: 324840
http://jsfiddle.net/2a7LR/5/ Adjusted some CSS for you. Basically used width: 100%; height: 100%
, moved the 10px
to the container's padding
property, then added box-sizing
to the textarea to make the size take the border into account.
Upvotes: 10
Reputation: 553
http://jsfiddle.net/EzJ8G/1/ Replace the style in textarea and add padding:10px;
Upvotes: -2