How to make a Stacked Bar Chart?

I've got to implement a quick n dirty stacked bar chart with just DIVs and SPANs, at the moment the idea I have in my head goes something like this:

<div style='width:500px'>
  <span class='d5' style='width:33%;'>5</span>
  <span class='d4' style='width:27%;'>4</span>
  <span class='d3' style='width:20%;'>3</span>
  <span class='d2' style='width:13%;'>2</span>
  <span class='d1' style='width:6%;'>1</span>
</div>

However, this isn't working. Can someone put me right? I think I need to use position: absolut开发者_Go百科e/relative and/or float here but everything is having little effect.

It looks like you're simply missing a "display: block;" on your spans. But anyway, using a list is arguably more semantic and all you need to do is set the width and colours.

http://jsbin.com/ajuna4

I would use divs instead of the spans and also give your divs height otherwise they will not be displayed. If you want div's to be lined horizontally then set the float:left;

div>span
{
float: left;
border: 1px solid yellow;
background-color: green;
text-align: center;
}

Fiddle