What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

Question

Sample HTML/CSS:

    
    



div.container         


        

Answer 1

You can accomplish this by making use of the box-sizing CSS property on the input box:

input {
    display: block;
    width: 100%;
    box-sizing: border-box; /* CSS3 */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box; /* IE8 */
    -webkit-box-sizing: border-box; /* Safari */
    -khtml-box-sizing: border-box; /* Konqueror */
}

Additionally, to get it to work with IE6 & IE7, you'll need to throw this in your HTML:

See it in action, here.

Get the boxsizing.htc here.

SpliFF's post was my source a while back and I've used it a couple times since.