CODEWITHSUNDEEP
css
user246114
user246114

Reputation: 51611

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

Upvotes: 31

Views: 43115

Answers (4)

Spongebob Comrade
Spongebob Comrade

Reputation: 1568

You can use the grid layout:

<li class="my-grid">
  <span class="left">a</span>
  <span class="right">b</span>
</li>

And the css :

.my-grid {
        display: grid;
        grid-template-columns: max-content auto;
}

.left{
  background: red;
}

.right{
  background: blue;
}

Play with the grid-template-columns property so it suits your needs.

https://jsfiddle.net/c9j3ok7u/

Upvotes: 0

Michael
Michael

Reputation: 20049

You don't want to float each of them left, only the first one, and then make the second one display in block mode:

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

Upvotes: 24

Fallen Flint
Fallen Flint

Reputation: 319

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.

Upvotes: 12

cnanney
cnanney

Reputation: 2171

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

http://jsfiddle.net/ymAt5/

Upvotes: 6

Related Questions