CODEWITHSUNDEEP
htmlcss
mellowsoon
mellowsoon

Reputation: 23231

Textarea At 100% Width Overflows Parent Container

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.

Upvotes: 17

Views: 8262

Answers (3)

Jake
Jake

Reputation: 261

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.

Upvotes: 26

sv_in
sv_in

Reputation: 14039

Main reason: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

When IE is not in standard complaint mode (ie, when mostly doctype is NOT mentioned), the width of an element includes it's padding and margin. This leads to the overflowing of the textarea.

Trying remove any margin or padding to thetextarea provided by you or the browser.

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

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

Probably it is inheriting some margin.

Upvotes: 5

Related Questions