CSS : How to have an input field auto adjusting its width

Question

I have a div called wrapper. It is centered horizontally using the margin property. The width of that wrapper is fixed.Inside that wrapper I have an a tag followed by an input field. What I am looking for is to have the width of the input field auto adjusting to the remaining width on the right (until the border of wrapper). I would like to avoid defining the width in pixels. I tried few thing but nothing is working (width auto or 100% for instance). Hope to be clear and hope someone can help.

FIDDLE: http://jsfiddle.net/72sPT/

HTML:

<div id="wrapper">
   <a>this is a button</a>
   <input type="text"/>
</div>​

CSS:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}

​

Answer 1

If you wrap the input tag in another div, you can do:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}
#wrapper a {
    float: left;
}
#wrapper div {
    overflow: hidden;
}
#wrapper input {
    width: 100%;
}