What's keeping my input element from displaying like a block element?

Question

http://jsfiddle.net/aam7J/

How would I induce div-like behaviour on the input element? Specifically, how can I induce the width to expand such that its outer width including margin fills up the container? width: 100% doesn't work, because it doesn't take into account the other box model attributes.

Answer 1

I use a "hack" to account for the input border width something like this...

<div>hello world</div>
​
<div class="adjustForTheInputBorder">
    <input type="text" />
</div>


input 
{
    width:100%; 
    border-width:2px; 
}

div.adjustForTheInputBorder
{ 
    margin-right: 4px;  /* or 2x whatever your input border width is */
}

div 
{
    background-color: pink;
}

My adjustForTheInputBorder class tends to have a name which more appropriately conveys my hatred of css though... :)

P.S. div renders as display:block by default, you don't need that there.