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/

Answer 2

You can use the ol' table display trick here. Lose the float and set the div to display: table; and the children to display: table-cell;.

Here's an example showing it. You may need some adjusting to the get the 'something' the way you want it (for instance, setting a width), but that might be more than what you want to do.

div {
  display: table;
  width: 100%;
}
.a, .b {
  display: table-cell;
}
.b {
  width: 100%; 
}