Menu
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 )
446
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.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
