I have created a bar graph using HTML and CSS. The issue I am facing is that the bar fills up in reverse order - when the height is set to 0%, the bar appears filled at 100%. I attempted changing the CSS property from "top" to "bottom," but it did not resolve the problem. Can anyone advise on how to ensure that setting "height:100%" will correctly show the bar as fully filled?
HTML:
<div class="bars">
<div><span style="height:0%;"></span></div>
<div><span style="height:10%;"></span></div>
<div><span style="height:20%;"></span></div>
<div><span style="height:30%;"></span></div>
...
<div><span style="height:100%;"></span></div>
<div><span style="height:90%;"></span></div>
...
<div><span style="height:0%;"></span></div>
</div>
CSS:
.bars {
height: 48px;
display: block;
overflow: hidden;
margin: 0 3px;
}
.bars div {
background: rgb(12, 88, 160);
...
float: left;
height: 100%;
width: 8px;
margin-right: 2px;
}
.bars div span {
background: #233243;
height: 0%;
width: 100%;
display: block;
position: relative;
top: 0;
}