CSS - Input at 100% width overlaps div

Question

I am trying to fix a regular input box with padding, border, inside a div with padding. However, I want the input to have its width to be 100% but as you can see, it overlaps. How do I fix this?

CSS

#one {
    background:red;
    width:300px;
    padding:5px;
}
#two {
    width:100%;
    border:3px solid blue;
    padding:4px;
}

​

HTML

<div id="one"><input type="text" value="Test" id="two" /></div>​

Answer 1

Add box-sizing: border-box to the input styles. Otherwise, the width is 100%, PLUS the border and padding.