title: HTML vertical bar of two different colors
body: <p>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.</p>
  
  <p>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:</p>
  
  <p>Style</p>
  
  <pre><code>.bar1{
      width:40px;
      background-color:#A55541;
      position:left;
  }
  .bar2{
      width:40px;
      background-color:#CA804F;
      position:left;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div style="height:&lt;?=$max ?&gt;px; margin-top:10px;" class="bar1"&lt;/div&gt;
  &lt;div style="height:&lt;?=$max-($mistakes*$scale) ?&gt;px; margin-top:10px;" class="bar2"&lt;/div&gt;    
  </code></pre>
  
  <p>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.</p>