Timeline Years Sample

Design & Typography (2007 - 2009)
Photography (2006 - 2009)
Object Oriented Programming (2005 - 2009)
Web Development (2004 - 2009)
3D Modeling and Rendering (2003 - 2006)
Drawing & Illustration (2003 - 2009)

2003
2004
2005
2006
2007
2008
2009

.demo {
padding-bottom: 45px;
}
 
ul.events {
list-style-type: none;
margin: 0;
padding: 0 0 20px 0;
}
 
ul.events li {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: #eee;
border: 1px solid #ddd;
color: #707070;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 6px;
padding: 3px 0;
position: relative;
text-align: center;
}
 
ul.events li em {
color: #aaa;
font-weight: normal;
font-size: 0.9em;
}
 
ul.intervals {
list-style-type: none;
padding: 0;
display: block;
width: 110%;
}
 
/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */
ul.intervals li {
background: #fff;
border-right: 1px solid #ccc;
color: #999;
float: left;
font-size: 1.2em;
margin: 0;
padding: 15px 0;
text-align: center;
width: 14.17%;
}
 
ul.intervals li.first {
border-left: 1px solid #ccc;
}