CSS Textarea width is wrong also margin left and right

Question

I created a fiddle to show something strange. I created a DIV 200px width and inside this DIV i inserted a textarea using CSS. Because it is a box div like the rest of the design I need the texarea to have 10px margin left and 10px margin right, so I edited the margins and set the width of textarea to 180 because if outer div is 200px and 10px padding left - 10px padding right I have 180px left to be used in textarea width

Here is the code I used:

CSS

#messenger {
    margin-left:10px;   margin-right:10px;    margin-top:10px;    margin-bottom:10px;
    width:180px;      height:64px;  overflow:auto;
    background:#ffffff;    font-size:11px;   font-weight:normal;   color:#333333;
    border:1px solid #666666; 
    padding-left:5px;padding-right:5px;padding-top:2px;
}

#outer {width:200px;background:#cccccc;}

HTML

<div id="outer">
<textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';">
Your message here
</textarea>
</div>

well it is looking pretty bad here is the demo:

https://jsfiddle.net/f3d1t223/

And also a screenshot

I really need it to have borders 1px too. Any ideas why this is happening?

Harshana Samaranayake Harshana Samaranayake · Accepted Answer · 2015-04-24T19:55:56

Check out this one.

#messenger {
    margin:10px;
    width:168px;      
    height:64px;  
    overflow:auto;
    background:#ffffff;    
    font-size:11px;   
    font-weight:normal;   
    color:#333333;
    border:1px solid #666666; 
    padding-left:5px;
    padding-right:5px;
    padding-top:2px;
}

#outer {width:200px;background:#cccccc;}

<div id="outer">
<textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';">
Your message here
</textarea>
</div>

acording to your code you have padding and border size also so need to reduce those values from the width of the textarea.

CSS Textarea width is wrong also margin left and right

3 Answers