Getting an input to fill remaining width like a span element

Question

I want to have a text input fill the horizontal space remaining in a div.

The answer here provides a simple example of doing this with a span: https://stackoverflow.com/a/3499333/165673, but for some reason I can't get my input element to behave in the same way.

HTML:

<div>
<span class="a">something</span>
<span class="b">fill the rest</span> 
</div>

<div>
<span class="a">something</span>
<input class="b" value="fill the rest">       
</div>

CSS:

.a {
    float:left; background-color:red
}
.b {
    background-color:green;display:block;
}

Fiddle: http://jsfiddle.net/FKZUA/1/

In the first example, span.b fills the remaining space. However, input.b won't.

Answer 1

This should do the trick for you:

css

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
​

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle : http://jsfiddle.net/FKZUA/55/