Represent child as a fractional background width of parent

Question

I'm trying to visually represent results of a poll inside bars.

I can't manage to display score bars into items properly.

Here is what I have so far :

#poll {
  max-width: 480px;
}

.score {
  float: right;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
}

.bar {
  display:block;
  background: #61CE3C;
  height: 100%;
  position: relative;
  z-index: -1;
}

<div id="poll">
  <div class="item">
    <span class="bar" style="width:84.6%;"> </span>
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:0;"> </span>
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:15.4%;"> </span>
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

How to display background bar behind title and score as fractional width of parent item?

Have you thought of using [Progress Bars](https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp)? — Henrique Pombo, Aug 24 '21 at 14:21
Does this answer your question? [Does height and width not apply to span?](https://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span) — depperm, Aug 24 '21 at 14:23
Change the `.item` class's position to `relative` and `.bar`'s to `absolute`. [Here is example](https://jsfiddle.net/srLcdvty/1/) — InspectorGadget, Aug 24 '21 at 14:32
Slight improved look, based on @dolmushcu comment [example](https://jsfiddle.net/gwkj7y89/) — depperm, Aug 24 '21 at 14:44

score 1 · Accepted Answer · answered Aug 24 '21 at 16:22

Simply use a background linear gradient:

#poll {
  max-width: 480px;
}

.score {
  float: right;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
}

<div id="poll">
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 84.6%, transparent 0px);">
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 0%, transparent 0px);">
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item" style="background: linear-gradient(to right, #a6e2ae 15.4%, transparent 0px);">
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

score 0 · Answer 2 · answered Aug 24 '21 at 14:19

You can give the item a flex display and remove the z-index:-1

#poll {
  max-width: 480px;
}

.item {
  border: 1px solid grey;
  padding: 5px;
  margin: 3px 0;
  width: 100%;
  display: flex;
}

.score {
  margin-left: auto;
}

.bar {
  background: #61CE3C;
}

<div id="poll">
  <div class="item">
    <span class="bar" style="width:84.6%;"> </span>
    <span class="title">More than 10</span>
    <span class="score">84.6%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:0;"> </span>
    <span class="title">Between 5 and 10</span>
    <span class="score">0%</span>
  </div>
  <div class="item">
    <span class="bar" style="width:15.4%;"> </span>
    <span class="title">Less than 5</span>
    <span class="score">15.4%</span>
  </div>
</div>

You won't see it since it doesn't have a bigger size than the item itself. I think you can only achieve this with giving a position absolute — Sinan Yaman, Aug 24 '21 at 14:37

Represent child as a fractional background width of parent

2 Answers2