HTML vertical bar of two different colors

Question

I want to make in HTML some statistic bar charts, to represent in the same bar two different values using two different colours, for example: from an exam of 10 questions, 6 question were correctly answered and 4 wrong. In the bar should appear the 60% green and the other 40% red.

I have been thinking in display the red one first, and the green one over it, so it covers the the lower part, something like this:

Style

.bar1{
    width:40px;
    background-color:#A55541;
    position:left;
}
.bar2{
    width:40px;
    background-color:#CA804F;
    position:left;
}

HTML

<div style="height:<?=$max ?>px; margin-top:10px;" class="bar1"</div>
<div style="height:<?=$max-($mistakes*$scale) ?>px; margin-top:10px;" class="bar2"</div>    

But it doesn't work. Does anyone know how to solve it?? I have been looking for a similar question on here but I couldn't find it.

Answer 1

You could try to do this:

PHP

<?php
$max = 300;
$mistakes = 100;
$scale = 1;
?>

HTML

<div style="height:<?=$max ?>px;" class="bar1"></div>
<div style="height:<?=$max-(mistakes*scale) ?>px;" class="bar2"></div>  

CSS

.bar1{
    width:40px;
    background-color:red;
    position: absolute;
}
.bar2{
    width:40px;
    background-color:green;
    position: fixed;
}

http://jsfiddle.net/BDNXS/