input text box width same as parent

Question

How can I have a textbox that inherits the width of it\'s container?

For example I have a div that has a textbox inside it.

Answer 1

You should use box-sizing:border-box together with width:100%. This way input will fit 100% of container's width but will not overflow it because of added input's padding:

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

Live demo: http://jsfiddle.net/745Mt/1/

More information about box-sizing CSS property with examples: http://css-tricks.com/box-sizing/