Horizontal timeline in pure css

Question

I'm trying to make a timeline in pure CSS, but I seem to run into some problems.

When I try to set the div timeline as overflow-x: scrolling through it still scrolls by access y.

This is what I have:

        <ol id="timeline">
            <li class="event founded"></li>
            <li class="event grant"></li>
        </ol>


        #timeline {
          height: 500px;
          width: auto;
          margin: 0;
          background: red;
       }

       .event {
          height: 500px;
        }

      .founded {
         width: 400px;
         float: left;
         background: blue;
       }

       .grant {
          width: 800px;
          background: yellow;
       }

I just want each additional record to match the previous one, and all this can be scrolled horizontally. If anyone could point me in the right direction, that would be awesome.

Thanks.

Answer 1

I literally just had to do one of them. Here is what I came up with:

http://jsfiddle.net/kthornbloom/zJ6kp/

.