2

I have a parent div which has child divs which are dynamically added under that. I want to fill the parent div completely by children based on their width. The combined width of children is always equal to 100.

I have tried this so far : 

<div style="position:relative; background-color:red;">
  <div class="progressPercent" style="display:inline-block;""width:33%">33
  </div>
  <div class="progressPercent" style="display:inline-block;" "width:33%">33% 
  </div>
  <div class="progressPercent" style="display:inline-block;" "width:33%">33% 
  </div>
</div>

JSFiddle

All the child divs are dynamically created and I am trying to is create a completion progress percentage bar.

As in fiddle explained I want to fill the GREEN divs completely to cover the RED parent div.

Einstein_AB
  • 396
  • 5
  • 22
  • 1
    Just fix your html. – Mike Doe May 02 '19 at 07:15
  • The style attribute is broken. Don't wrap each 'style' in a separate set of quotes. You only need one. `style="display:inline-block; width:33%"`. Also note, try not to use "!important" unless you really have to - it'll save you many headaches in the future. – Lewis May 02 '19 at 07:18
  • 1
    working here [check](http://jsfiddle.net/L8efm0pv/1/) – Joykal Infotech May 02 '19 at 07:19
  • Yes the HTML was broken indeed as It was generated dynamically and I added an extra " there. Thanks @emix and Lewis. – Einstein_AB May 03 '19 at 07:48
  • Adding the 'float:left' worked as explained by @ Joykal Infotech. That solved the issue – Einstein_AB May 03 '19 at 07:48
  • @Joykal Infotech please write your suggestion in an answer, as that was something solved the problem for me. I would mark that as an accepted answer – Einstein_AB May 16 '19 at 08:09
  • See my answer here: https://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other#70002444 – SharpC Nov 17 '21 at 10:12

2 Answers2

4

You're putting some extra " in there - after inline-block. Also take into account that line endings add an extra space, so your containers' total width would be 33% + 33% + 33% + 2 extra spaces.

You might want to try using display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

I'm using calc( 100% / 3 ) as it's more accurate than using 33% tree times, which is 1% short of 100%.

Sorin Buturugeanu
  • 1,782
  • 4
  • 19
  • 32
  • I had a requirement where I needed to round and display the progress. The detailed decimal calue should be shown on the hover. For simplicity I added the rounded values in the example. I am using the actual calculation as 33.33 for setting the width in real-time. Thanks for making that a point of concern here. As mentioned in the question I have the div dynamic and can be anything like 75-25 (2 div) or some thing like 25-25-10-10-30 (5 div). – Einstein_AB May 03 '19 at 07:50
0

flex-wrap: nowrap can be used to make sure all elements will be in the same line. Pop this between the Style tags and you should be fine.

div{
    display: flex;
    flex-wrap: nowrap;
}
Spencerish
  • 37
  • 5