'Let span fill remaining width?

I have the following li item:

<li>
  <span style='float:left; background-color:red'>a</span>
  <span style='float:left; background-color:green'>b</span>
</li>

I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?

Thanks

css


Solution 1:[1]

Looked for the same solution, but found only this which worked great for me:

<li>
  <span style='display: table-cell; background-color:red'>a</span>
  <span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>

All you need is just using table-cell displaying and set filler span width to 100%. All other solutions I've tried didn't work for me as expected.

Solution 2:[2]

Don't float the second one, and make it display:block.

http://jsfiddle.net/ymAt5/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Friedrich
Solution 2 cnanney

Related Questions