Input type=text to fill parent container

With CSS3 you can use the box-sizing property on your inputs to standardise their box models. Something like this would enable you to add padding and have 100% width:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

Unfortunately this won't work for IE6/7 but the rest are fine (Compatibility List), so if you need to support these browsers your best bet would be Davids solution.

If you'd like to read more check out this brilliant article by Chris Coyier.

Hope this helps!

You can surround the textbox with a <div> and give that <div> padding: 0 20px. Your problem is that the 100% width does not include any padding or margin values; these values are added on top of the 100% width, thus the overflow.