How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Question

I have the following CSS and HTML snippet being rendered.

textarea  {    border:1px solid #999999;    width:100%;    margin:5px 0;    padding:3px;  }

<div style="display: block;" id="rulesformitem" class="formitem">    <label for="rules" id="ruleslabel">Rules:</label>    <textarea cols="2" rows="10" id="rules"/>  </div>

Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?

Answer 1

Why not forget the hacks and just do it with CSS?

One I use frequently:

.boxsizingBorder {     -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;             box-sizing: border-box; } 

See browser support here.

Answer 2

The answer to many CSS formatting problems seems to be "add another <div>!"

So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):

textarea  {    width:100%;  }  .textwrapper  {    border:1px solid #999999;    margin:5px 0;    padding:3px;  }

<div style="display: block;" id="rulesformitem" class="formitem">    <label for="rules" id="ruleslabel">Rules:</label>    <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>  </div>