Question

I have an input element inside a div element:

...
<div id="calculator-container">
    <input type="text" />
</div>
....

In CSS I make the input width 100%:

#calculator-container {
    border: 1px solid black;
    background-color: lightgrey;
    width: 200px;
    padding: 10px;
}

#calculator-container input {
    width: 100%;
}

I can’t figure out why is there less free space on the right side of the input than on the left (please see the screenshot below). Maybe somebody can advise. Thanks.

---

Pointing out that on jsfiddle it looks fine but if you copy it locally it looks bad in both IE and Firefox. Here is the jsfiddle link just so you can copy the code: jsfiddle just to get the code

Answer 1

It’s because width means the width of the element’s content area. The <input>’s content area is surrounded by its padding and border.

• http://jsfiddle.net/3f7RB/

If you set those to 0, the input no longer takes up more space than is available:

input {
    width: 100%;
    border-style: none;
    padding: 0;
}

• http://jsfiddle.net/3f7RB/1/

(Of course, form elements are often rendered a bit differently from regular elements, so different browsers may do different things.)

If you want padding on the <input>, you can either declare that as a percentage too:

input {
    width: 96%;
    border-style: none;
    padding: 4px 2%;
}

• http://jsfiddle.net/3f7RB/5/

Or use box-sizing (not supported in IE 6 or 7) so that width: 100% applies to the <input>’s content, padding and border combined:

input {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

• http://jsfiddle.net/3f7RB/6/