Getting the input box 100% even width inside a fieldset element

Question

How can I get my input box positioned evenly inside my fieldset element at 100% width with respect to my fieldset?

As it stands now, it seems the input box is overflowing on the right out of the fieldset and im not sure why?

Here's an image of the problem (ie10):

Here is the markup:

fieldset {
  padding: 3px;
  width: 300px
}

label {
  float: left;
  font-weight: bold;
}

input {
  width: 100%;
}

<fieldset>
  <legend>Subscription info</legend>
  <input type="text" name="name" id="name" />
</fieldset>

Answer 1

The issue you are facing is the default style that is computed on input by your browser. The browser adds padding and a border to the <input> element.

As you are setting width:100%; on the input, if you add the default padding and border, it renders wider than the container and therefore overflows.

You can solve this by adding : box-sizing:border-box; on the input so padding and border are contained in the 100% width.

fieldset {
  padding: 3px;
  width: 300px
}

label {
  float: left;
  font-weight: bold;
}

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

<fieldset>
  <legend>Subscription info</legend>
  <input type="text" name="name" id="name" />
</fieldset>

More info here about the box-sizing property.

Answer 2

sorry for before. But if you remove the padding it doesn't get cut off.

fieldset {
width: 300px
}