Why does an Input width of 100% always overrun the containing div?

Question

please note the fiddle: http://jsfiddle.net/cBWaG/4/

I have a container with a padding. What I want is the input(text) to be 100% width from within the padding. Currently though it overshoots the padding. Suggestions on how to prevent the input from overshooting the container/padding without having to use a fixed width?

Thanks

Answer 1

try this

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Demo

Answer 2

Form inputs are really hard to style. And it's especially hard to make the style look consistent across all browsers. One of the best ways I've found to style text inputs is to get rid of the border, outline, padding, and margin. Then wrap the input in a div with the border, outline, padding, and margin that you want.

I think I achieved what you want. Check out this forked jsFiddle: http://jsfiddle.net/aP2Ju/

Answer 3

The width property of an element in the standard box model does not include padding, margin or borders; it is the width given to the element's contents, not to the box itself. The box is bigger than the width by the size of the padding. Borders are then added, and finally the margin.

Older versions of IE (v4 and 5) used a non-standard box model which is now known as "Quirks mode". This box model placed the padding and borders inside the measured area, so that a box's width property included them. This model does make it easier to have a box that is 100% width.

Both box models have their strengths, but IE was going against the standards when they implemented their box model, and it was one of the reasons that made it difficult for developers to update older sites designed for IE only to work for other browsers.

More recently, a CSS property has been added which allows designers to choose which of these box models they wish to use for any given elements on their page. The property is called box-sizing, and is supported by most browsers in current use; the only major ones that don't support it are IE6 and IE7 (others require a vendor prefix but do support it). See here for a table of browser support for the feature: http://caniuse.com/#search=box-sizing

The other option is simply not to set the width at all. A <div> element by default is set to fill the available width, which basically means 100%, but in a way that works, no matter what the padding and margin are set to, which is basically what you're after. If you've overridden the width and want to set it back to this setting, use width:auto;.

Hope that helps.