CODEWITHSUNDEEP
csshtmltextarea
MirrorMirror
MirrorMirror

Reputation: 188

textarea inside div

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

Answers (3)

fedesc
fedesc

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

Niet the Dark Absol
Niet the Dark Absol

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

Hawiak
Hawiak

Reputation: 553

http://jsfiddle.net/EzJ8G/1/ Replace the style in textarea and add padding:10px;

Upvotes: -2

Related Questions