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

css, html

Solution

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.

Problem

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"></textarea> </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?

Original source