Question

Here is the live demo

I’m trying to put a padded text input inside a td, and I want it to occupy 100% of the width, but it goes outside of the td.
I don’t understand why that happens, anybody knows?

CSS

  table{
    border: solid 1px gray;
    width: 90%;
  }
  input{ width: 100%; padding:10px; }

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>

Answer 1

Explanation

Here’s a link to the W3C Box model which explain in detail what happens to your element.

– – – – –

All input elements have borders by default and may also have padding and margins, but most importantly, it follows the W3C box model specifications using the content-box.

This means that if you set the width to 100%, the actual size of the element will be greater than 100% when you include padding/borders, as shown in the images above.

---

Solution

Add padding to the td to manually adjust the width of the input until it’s where you want it to be. Remember that adding padding to the input means you have to add the same amount to the td to counteract the expansion.

Here’s a live example

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

table .last, td:last-child { 
    padding: 2px 24px 2px 0px; 
}

---

Alternative solution

You can also do the CSS3 version using box sizing (browser compatability).
This property can be used to switch between the two box models and will make it behave like you’d expect it to.

Here’s a live example

input {
    width: 100%;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

---

Here are some possible duplicates of the same question

• can i stop 100% width text boxes from extending beyond their containers
• Problem with input type=’text’ and textarea width
• 100% Width div’s and form elements + padding?