Simple CSS Bar Graph
Here's a nice and simple way to create a basic horizontal bar graph utilizing very basic CSS: Perfect for illustrating statistics, donations, or anything else you can think of.
A simple bar graph can be used in any number of situations. In my case, I used two on the 1080degrees Staging Server site. These graphs are very easily manipulated and are simple to implement.
The Code
We simply start with a container that will be the width and height of our graph.
<div style="width:300px; height:20px; background-color:#CCC;">
Next, we fill this container with the actual bar. The width is in percent, which will translate to be how much of the bar is colored in.
<div style="width:66%; height:20px; background-color:#666; border-right:1px #FFF solid;">
Now, all you have to do is close the DIV. I'm sure you can manage this on your own. To show you how your graph should turn out, here's how it should look:
Wrap Up
You can, of course, add in some extra labels using more DIVs and some negative margins, but this should serve as a good enough graph for most any situation.
