Home/ Questions/Q 8636837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:19:23+00:00

I have 2 divs inside of another div. The two inner divs are displaying

  • 0

I have 2 divs inside of another div. The two inner divs are displaying text, which is generated by my application. The length of the text varies. Is there any way to force one inner div, let’s say the first one, to fill the space leftover by the second inner div?

If that sounds cryptic, take the below example… the width of the score box varies in width depending on what is displayed.. 0% being short, 100% being long…

How do I ensure the button on the left fills the leftover space to make things fit tightly into the blue box.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest way I know of to do this with variable widths is to use faux tables:

    <div id="stuff">
 <div id="name">Jesse James</div>
 <div id="percent">100%</div>
</div>


#stuff { display: table; width: 200px; }
#stuff #name { display: table-cell; width: 100%; background: gray; }
#stuff #percent { display: table-cell; background: red; }

    http://jsfiddle.net/chovy/HMnSq/

    • 0