Getting an input to fill remaining width like a span element
css, html, layout
Solution
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/
Problem
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.