CSS - Input at 100% width overlaps div

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>​

Answers


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


Need Your Help

Why use pointers in C++?

c++ pointers dereference

I am learning C++ from a game development standpoint coming from long time development in C# not related to gaming, but am having a fairly difficult time grasping the concept/use of pointers and de-

jQuery on class removing event

jquery html

Well, I got something like this: