For one of my projects I had to create a visual representation of two percentages being compared side by side. I decided to do this using divs and CSS. With this design, all I have to do is set a value in my PHP for the width of the div highlighted in bold below and the sizing takes care of itself.

Here is what I came up with:

HTML:

<div class=”scoreBars”>
<div class=”scoreDivider”></div>

<div style=”width: 42%; height: 22px;background-color: #99CC00; position:absolute; top:0px; left:0px”></div>

<div style=” width:100%;height: 22px; position: absolute; z-index: 2; top: 0px; left: 0px;”>
<div style=”float: left; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 42% </div>
<div style=”float: right; margin-top: 3px; color: rgb(255, 255, 255); font-weight: bold;”> 58% </div>
</div>
</div>

CSS:

.scoreBars{
position:relative;

width:100%;
border:1px solid #999999;
height:22px;

/*This sets the color representing the right had side of the bars. The left hand value set in the HTML about simply covers this background color, so all I have to do is set the width for the div covering this color.*/
background-color:#3366CC;
}

/*The divider is simply a div with a right border that divides over all length of the bars into halves giving us an indication where 50% is.*/
.scoreDivider{
position:absolute;
width:50%;
border:dashed #FFFFFF;
border-width:0px 1px 0px 0px;
height:22px;
top:0px;
left:0px;
}

Result:

This entry was posted on Sunday, April 20th, 2008 at 2:30 pm and is filed under CSS, DHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.