CSS Graphs with Negative Axis

A while back, while working on an intranet that displayed the amount of cash flow, we (design team) had to come up with a way to show data graphically. As the graphs we wanted were rather simple bar charts, we did not want to expend too much energy in researching extra tools in achieving this goal. With a little creative trick using absolute positioning, out came the bar chart with negative axis. Check out the code below to create the effect.

<ul>
   <li class="current" style="width: 65px">65%</li>
</ul>
<ul>
   <li class="older" style="width: 40px">(40%)</li>
</ul>

ul{
        width: 200px;
	height: 50px;
	margin: 0;
	padding: 0;
	position: absolute;
	background: url(graph.jpg) no-repeat;
}

ul li{
	width: 100%;
	height: 25px;
	list-style: none;
	margin: 12px 0 0 0;
	padding: 0;
	line-height: 25px;
	font-size: 0.7em;
	position: absolute;
	color: #ffffff;
}

ul li.older{
	right: 100px;
	background: #D34545;
}

ul li.current{
	left: 101px;
	background: #23548F;
}

ul li.older div{
	margin: 30px 0 0 0;
	padding: 0 10px 0 0;
	text-align:right;
	color: #000000;
}

ul li.current div{
	margin: 30px 0 0 0;
	padding: 0 0 0 10px;
	color: #000000;
}

Download the sample code here.