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.

<div id='content' style='width:100%;'>
    <input type='text' name='txtUsername'>
</div>

What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.

With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.

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/