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

The padding is the issue of course, I would be interested to know how to do this myself. — deanvmc, Jul 31 '11 at 18:34
possible duplicate of [Can I stop 100% Width Text Boxes from extending beyond their containers?](http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers) — G.Y, Aug 20 '13 at 18:27
This resolved over here. Works like a charm! https://stackoverflow.com/a/16907625 — Sagar Kale, Nov 08 '20 at 21:34

score 20 · Answer 1 · answered Sep 10 '14 at 10:59

20

try this

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

Demo

answered Sep 10 '14 at 10:59

h0mayun

3,466
31
40

score 10 · Accepted Answer · answered Jul 31 '11 at 18:51

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/

score 5 · Answer 3 · answered Jul 31 '11 at 18:50

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.

score 1 · Answer 4 · answered Jul 31 '11 at 18:50

1

Create a new div inside the container div without a specified width nor padding. It will automatically occupy full width inside the padding. Then, you can give your input a width of 100% by which it fully fills the inner div.

answered Jul 31 '11 at 18:50

GolezTrol

114,394
18
182
210

1

You're right. My answer is wrong. The problem is not the padding on the div, but the border and padding in the input itself. If you remove that, you're fine (http://jsfiddle.net/ZCyBx/) but that is not what you want. I think you need to copy that extra padding to the parent too. If you give the div a right padding of 35px instead of 15px, you can compensate for the 10px left and padding of the input: http://jsfiddle.net/em3sW/ – GolezTrol Jul 31 '11 at 20:21
Alternatively just give the input/form a margin of -{padding}? – T. Feix Feb 11 '20 at 06:11

score 0 · Answer 5 · answered May 11 '12 at 05:42

0

width: 100%;

Is the elements TOTAL available width, including padding, as defined by its parent.

width: auto;

Will extend your element to fill the REMAINING space.

answered May 11 '12 at 05:42

Shawn Wernig

1,742
14
18

yeah.. well the problem is that what you just describe don't seem to work when you put a textbox (or html5 input element) with having style="width:100%" inside a div.. :) – G.Y Aug 20 '13 at 18:25
This does not work with inputs. Auto does not expand the element – Sebi2020 Sep 05 '22 at 15:55

score 0 · Answer 6 · answered May 19 '15 at 04:23

Yes, it is difficult to handle input element size. Box-sizing doesn't make a big difference, it still overruns the border. Agreed that using div is a good approach. Here is what I tested on IE 11 (11.0.18).

Lets use the divs now. The key is that set the margin and padding of the input elements to 0px and width:100%. This makes the input elements fill the parent container "div" element.

    <fieldset id="inputs">
        <div id="username_div">
            <input id="username" type="text" placeholder="username" required autofocus />
        </div>
        <div id="password_div">
            <input id="password" type="password" placeholder="password" />
        </div>
    </fieldset>


    #inputs div {
        border: 1px solid red;
        margin: 5px 10px 5px 10px;
        padding: 10px 10px 10px 30px;
        border: 1px solid #CCC;
        border-radius: 5px;
    }

    #inputs input {
        margin:0px;
        padding:0px;
        width:100%;
    }

score 0 · Answer 7 · answered Sep 04 '11 at 00:41

0

Just a note: The cause of this is the nature of the box model. The width of your <input> is actually 100%+padding.

answered Sep 04 '11 at 00:41

Jakob Jingleheimer

30,952
27
76
126

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

7 Answers7