Textarea At 100% Width Overflows Parent Container

Question

I'm having a problem with a textarea (and possibly any input element) being displayed too wide if the width is set to 100%. Here is my CSS.

First, I'm resetting all styles.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Then applying styling to my form.

form fieldset {
    border: none;
    border: 1px solid #ff0000;
    padding: 5px;
}
form fieldset legend {
    font-size: 20px;
    font-weight: bold;
}
form textarea {
    width: 100%;
    height: 500px;
}

And finally my HTML.

<form method="post">
    <fieldset>
        <label for="area">Content</label>
        <textarea id="area" name="area"></textarea>
    </fieldset>
</form>

In Chrome and Firefox (Haven't tested others yet), the textarea is properly padded 5px on the left, but on the right the textarea is either flush with the fieldset, or overflowing just a bit.

One thing of interest, is everything displays correctly if I remove the doctype from the page.

Answer 1

Whilst both answers (currently) provide useful relevant information, neither actually provide a solution, which is simply to add box-sizing: border-box; to the textarea, i.e.

form textarea {
    width: 100%;
    box-sizing: border-box;
    height: 500px;
}

box-sizing: border-box; is supported in all modern browsers including IE8 (but not IE7), and means that the element's width including border and padding is used when calculating layout.

The default is normally content-box which uses the element's inner width only. Most browsers supply their own default border and padding styles for textarea, but not always box-sizing, so the result may be that width: 100%; means the parent's width plus the browser's default border and padding, which, if those are non-zero, is obviously more than the width of the parent container.

Answer 2

Reset also the textarea, I don't see it at your reset CSS.

Probably it is inheriting some margin.