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

html css stylesheet
Eric Schoonover picture Eric Schoonover · Nov 7, 2008 · Viewed 436.1k times · Source

I have the following CSS and HTML snippet being rendered.

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

Piet Bijl picture Piet Bijl · Nov 11, 2010

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.

Related questions

Margin while printing html page

I am using a separate style-sheet for printing. Is it possible to set right and left margin in the style-sheet which set the print margin (i.e. margin on paper). Thanks.

Read More
HTML not loading CSS file

I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem? index.html <!…

Read More
How can I disable inherited css styles?

So I am creating a container with rounded corners using the following method: div.rounded { background: #CFFEB6 url('tr.gif') no-repeat top right; } div.rounded div { background: url('br.gif') no-repeat bottom right; } div.rounded div div { background: url('bl.…

Read More