100% width minus margin and padding [duplicate]

Question

I have been searching around but I can't find a solution to apply to my own problem.

I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?

To try it out: http://jsfiddle.net/wuSDh/

Answer 1

You can use calc, modern browsers support it and IE9+ as well.

div {   margin: 10px;   width: calc(100% - 20px);   height: 10px;   background: teal; }

<div></div>

Browser support