Content of div is longer then div itself when width is set to 100%? [duplicate]

Question

I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.

Demonstration code:

HTML:

<div class="container">
    <input class="content" id="Text1" type="text" />
</div>

CSS:

.container
{
    width: 300px;
    height: 30px;
    border: thin solid red;
}
.content
{
    width: 100%;
}

Result (Firefox):

This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers. How do I make the content to exactly fill the width of the div?

Answer 1

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

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

_{See here for an icky IE7 compatible method.}

Answer 2

You need to reset the paddings, margins and the borders. If you want to apply it sitewide, you can use a reset css like Eric Meyer's : http://meyerweb.com/eric/tools/css/reset/

Or you can write your own. Just default it to your own values