I've been tackling this issue for hours, but haven't found a working solution yet. The challenge is to create a progress bar with a dynamic width and a centered label that changes its text color between the progressed and unprogressed parts. Here's an image for better understanding:
While the current setup functions well when I know the width of the entire progress bar, it falls short in responsive designs where the width is calculated automatically.
Here's the code snippet I'm working with:
<div class="progress" style="width: 400px;">
<div class="progressValue" style="width: 50%">
<div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
</div>
<div class="progressLabel">I'm a progress text</div>
</div>
And here's the accompanying CSS:
.progress {
position: relative;
}
.progressValue {
overflow: hidden;
position: absolute;
height: 20px;
background-color: blue;
}
.progressInnerLabel {
position: absolute;
text-align: center;
color: white;
height: 20px;
}
.progressLabel {
background-color: #eee;
text-align: center;
color: black;
}
I've set up a fiddle for experimentation: http://jsfiddle.net/Q82kF/2/
I'm looking for a way to remove the fixed width of 400px from my first div (class = progress) element in the HTML so the progress bar can dynamically adjust to the available width. Is there a CSS/HTML-only solution that doesn't involve JavaScript?
I'm determined to find a pure CSS/HTML fix without relying on JavaScript or any libraries.