Why is my textarea wider than the page?

Question

I wrote an XHTML 1.0 Transitional page (validated using the W3C's validator), containing a table with a textarea in it:

<table>
    <tr>
        <td>
            <textarea rows="" cols="">
            </textarea>
        </td>
    </tr>
</table>

And, in an external stylesheet, I wrote code for the table and textarea:

table {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
textarea {
    width: 100%;
    height: 200px;
    padding: 20px;
    margin: 0px;
}

But, for some reason, the padding of the textarea affects its width, and causes the textarea to exceed the width of the page, resulting in unwanted overflow.

Is there some way I can apply padding to the textarea without it affecting its width?

"for some reason, the padding of the textarea affects its width" - yup. That's how CSS works. — Paul D. Waite, Aug 21 '13 at 15:40

score 2 · Accepted Answer · answered Aug 21 '13 at 15:41

for some reason, the padding of the textarea affects its width

Yup, that's how CSS works. width refers to the width of the element's content area. Padding, borders and margin are treated separately by default.

See e.g. http://quirksmode.org/css/user-interface/boxsizing.html

Is there some way I can apply padding to the textarea without it affecting the TextArea's width?

The CSS box-sizing:border-box rule does what you want:

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

It tells the browser to treat width as referring to the combined width of the content, padding and border areas of the element. So, the width of the <textarea>'s content area will be set to 100% of the parent element, minus the 40 pixels of horizontal padding.

Note, however, that border-box is not supported in IE 7 or earlier.

Works perfectly now, much thanks. I had no knowledge at all of this property or its influence. I was even able to give the table padding without its contents overflowing. — Logical Angel, Aug 21 '13 at 15:50
@LogicalAngel: yeah, it's very very handy. (In Quirks Mode, IE 7 and earlier treated width in the `box-sizing:border-box;` way by default.) You're most welcome - upvotes (click the arrow above the "0" in the top left corner of my answer) and acceptances (click the tick) are gratefully accepted too. Welcome to Stack Overflow! — Paul D. Waite, Aug 21 '13 at 16:43

Why is my textarea wider than the page?

1 Answers1