http://mattbango.com/notebook/web-development/pure-css-timeline/

<style type="text/css">
        /**
         * CSS Timeline Styles
         */

         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;
         }

         /* 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 url(/images/1x1_eee.gif) repeat-x left 10%;
             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;
         }
    </style>

    <!--[if IE]>
        <style type="text/css">
            ul.intervals li {
                width: 14.11%;
            }
        </style>
    <![endif]-->

<div class="timeline">
    <ul class="events">
        <li style="width: 42.3%; left: 57.2%;">Design &amp; Typography<br />
            <em>(2007 - 2009)</em>
        </li>

        <li style="width: 56.5%; left: 43%;">Photography<br />
            <em>(2006 - 2009)</em>
        </li>

        <li style="width: 71.1%; left: 28.4%;">Object Oriented Programming<br />
            <em>(2005 - 2009)</em>
        </li>

        <li style="width: 85.3%; left: 14.2%;">Web Development<br />
            <em>(2004 - 2009)</em>
        </li>

        <li style="width: 42.75%; left: 0;">3D Modeling and Rendering<br />
            <em>(2003 - 2006)</em>
        </li>

        <li style="width: 99.5%; left: 0;">Drawing &amp; Illustration<br />
            <em>(2003 - 2009)</em>
        </li>
    </ul>
    <!-- end .events -->

    <ul class="intervals">
        <li class="first">2003
        </li>

        <li>2004
        </li>

        <li>2005
        </li>

        <li>2006
        </li>

        <li>2007
        </li>

        <li>2008
        </li>

        <li class="last">2009
        </li>
    </ul>
    <!-- end .intervals -->
</div>
<!-- end .timeline -->