width: 100%-padding?

Question

I have an HTML input.

The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).

However using width: 100%; causes the input to be 100% + 20px how can I get around this?

Example

Answer 1

For box-sizing: border-box is a quick, easy way to fix it:

The code given below will work in all modern browsers, and IE8+.

.content {

    width: 100%;

    box-sizing: border-box;

}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Have a look at this demo: http://jsfiddle.net/thirtydot/QkmSk/301/