Today I needed a gauge to show where on a scale that a value fell.
I wanted to use CSS instead of dynamically creating an image in PHP or creating 100 static images.
I found some samples that use DIV tags to create a gauge, but I needed to put text both before and after the gauge on the same line.
So I modified the sample Super simple CSS bars.
CSS
.progresslineleft {
clear: left;
float: left;
padding-top: 4px;
}
.progresslineright {
float: left;
padding-top: 4px;
}
.progressbar {
border: 1px solid #ccc;
width: 100px;
margin: 2px;
padding: 1px;
background: white;
float: left;
}
.progressbar div {
background-color: #ACE97C;
text-align: right;
}
HTML
<div class="progresslineleft">Uniqueness Score: Similiar (0) </div>
<div class="progressbar"><div style="width:44%">44</div></div>
<div class="progresslineright"> Unique (100)</div>
Change the 44's to the value that should be displayed in the gauge.
Discussion
SPAN tags won't work because they can't have a width attribute. Plain DIV tags won't work because each DIV starts on a new line.
The solution is to float the DIVs.
This has been tested with Firefox 3, Safari 5 and IE 8.