Input in div container, won't stretch - html

Question

I have a div containing an input. I want the input to stretch to fill the available space, this works in Chrome but not IE and Firefox.
<div class="outer">
<input type="text" />
</div>
.outer{
width: 100%;
height: 40px;
position: relative;
}
input{
position: absolute;
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
JSFiddle: http://jsfiddle.net/wwMZg/1/
In Chrome it appears like this:
In Firefox and IE it appears like this:
In my real-use scenario there are other divs that contain images for corners, that's why the top, left, right, bottom values are set to 7px in this example.
I would like to avoid setting the width directly on the input, I wan't to set it on .outer.

Answer 1

Most input elements have padding/borders on them. You need to use the box-sizing property to adjust how the element dimensions are calculated.
http://jsfiddle.net/wwMZg/5/
.outer {
width: 100%;
height: 40px;
}
.outer input {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://caniuse.com/#search=box-sizing

Answer 2

If you cant use box-sizing because you need to support older browsers, and don't mind adding another element to the markup, you can use an intermediate div
CSS
.outer{
width: 100%;
height: 40px;
position: relative;
}
.inner {
position: absolute;
top: 7px;
bottom: 7px;
left: 7px;
right: 7px;
}
input{
width: 100%;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" />
</div>
</div>
Fiddle: http://jsfiddle.net/2mFgR/

Answer 3

Controlling the stretching and height of an input element
This styling problem is a bit intriguing since the input element seems to have its own set of rules.
Consider the following HTML:
<div class="outer">
<div class="inner">
<input type="text" />
</div>
</div>
and the CSS:
.outer {
width: 100%;
font-size: 20px;
background-color: green;
overflow: auto;
}
.inner {
margin: 7px;
}
input {
font-size: inherit;
width: 100%;
border: none;
}
Wrapping the input field in the .inner element allows it to expand to 100% without triggering horizontal overflow on the top level container.
However, the margins will not be fully symmetric unless you set border: none on the input field. This could be fixed using box-sizing to deal with the width of the borders.
With respect to the height property, input behaves like a regular inline, non-replaced element, that is, the height value does not apply and you need to use the font-size to get some control over the height.
See demo at jsFiddle

Answer 4

add width:100% to your input style
.outer{
width:100%;
height: 40px;
position:absolute;
}
input{
position:relative;
top: 7px;
bottom: 7px;
width:100%;
padding:0px;
margin-left:-1px;
border:1px solid gray;
}
It's the border that's offsetting it in IE