Question

I’ve noticed whenever I set width: 100%; on a textarea or an input text, they surpass the parent width.

The textarea and text field are surrounded by a padding of 10 pixels within it’s container. Is there a way to have it stop once it hits the bounding box surrounding it? What are the best practices to making a width:100%; element?

Answer 1

I’d suggest a css reset:

textarea, input {
     padding: 0;
     margin: 0;
}

and also keep in mind that width:100% will match the parent width, but then borders are to be taken into consideration. You may want to learn about box-sizing in this article:

http://paulirish.com/2012/box-sizing-border-box-ftw/