Horizontal CSS bar graphs

November 15, 2006

Horizontal CSS bar graphs

Even though I've been doing CSS for years, I still think it's the coolest thing since sliced bread—the novelty hasn't worn off and probably won't until something better comes along.

Last night I gave my CV a much needed update. One neato feature I included in the online version is a horizontal chronology of my work experience. Looking at the source code reveals it's all done in CSS.

CSS bar graphs are nothing new, but my approach is a little unique. By using em's for all measurements, it makes it especially easy to specify the bounds of the various items; a job that lasted 12 months is simply 12 ems wide. This also makes the whole thing scale very nicely as you adjust text size.

Another cool thing is the toggle between outline and timeline views—just changing a class on the body completely restructures the whole thing.

Posted by jon at November 15, 2006 7:29 AM


Linked to you from the master of CSS, Eric Meyer - your CSS-Fu is strong, my friend! That's an awesome timeline.

Posted by: Dave M at November 17, 2006 5:30 PM


Gotta give Eric most of the credit... his bar graphs gave me the initial idea. Then there's the fact that css/edge and Dave Shea's CSS Zen Garden were what got me into CSS in the first place.

Posted by: jon at November 17, 2006 5:48 PM

Beautiful work! Would it be possible to make the graph default to the outline view for printing even if someone has opted to print while in timeline mode? You can't see the work experience details if you just print the timeline.

Posted by: Sheri Bigelow at November 30, 2006 7:39 PM

Excellent idea... I've gone ahead and updated the CSS so that now it prints the outline regardless which view mode is currently selected. It's basically just a matter of wrapping some rulesets in @media screen{}

Posted by: jon at December 1, 2006 10:59 AM

Brilliant. Good work, and thx for the inspiration.

Posted by: Kevin Klein at January 24, 2007 10:53 AM