Example bar chart

The following bar chart uses an unordered list and list elements to achieve a vertical bar chart look.

• 75%
• 15%
• 20%
• 0%
• 33%
• 100%

Once you get rid of the comments, the code is very concise.

body { font-family: verdana, arial, helvetica, sans-seirf; font-size: 90%; }
.chart, .chart li { list-style: none; margin: 0; padding: 0; }
.chart { 
	/* don't start the chart on the
		very edge of the page */
	margin: 1em; 
	
	/* give it a border */
	border: 1px solid #000;
	
	/* set the background color */ 
	background-color: #bebebe;
	
	/* make it so that the bars can
		consume the height by default */
	position: relative;
	
	/* how tall should this chart be? */
	height: 10em;
	
	/* prevent overflow ugliness */
	overflow: hidden;
}
.chart:after {
	display: block; visibility: hidden; content: ".";
	height: 0; overflow: hidden; clear: both;
}
.chart li {
	float: left;
	position: relative;
	height: 100%;
	
	/* how wide you want the bars */
	width: 4em;
	
	/* how wide the gap between the
		bars should be */
	margin: 0 .5em;
	
	/* prevent stupid text overflowing
		problems */
	overflow: hidden;
	
	/* put the labels in the horizonal
		middle */
	text-align: center;
	
	/* color of the text */
	color: #fff;
	
}

.chart li span { 
	/* make the labels behave
		as absolutely positioned
		blocks */
	display: block; 
	position: absolute; 
	bottom: 0; left: 0; 
	
	/* make it consume the entire parent's
		width */
	width: 100%;
	
	/* the height is set INLINE */
	
	/* fix stupid overflowing issues */
	overflow: hidden;
}

/* set different color options */
.one span { background-color: #900; }
.two span { background-color: #039; }
.three span { background-color: #0f0; }