Horizontal timeline in pure css - html

Question

I'm trying to make a timeline in pure CSS however I seem to be running into some problems.
When I try to set the timeline div as overflow-x: scroll it still scrolls on the y access.
This is what I've got:
#timeline {
height: 500px;
width: auto;
margin: 0;
background: red;
}
.event {
height: 500px;
}
.founded {
width: 400px;
float: left;
background: blue;
}
.grant {
width: 800px;
background: yellow;
}
<ol id="timeline">
<li class="event founded"></li>
<li class="event grant"></li>
</ol>
I just want each additional entry to follow the previous one and for it all be scroll-able horizontally. If anyone could point me in the right direction that would be amazing.
Thanks.

Answer 1

I literally JUST had to make one of these. This is what I came up with:
body {
padding: 25px;
font-family: sans-serif;
}
.timeline {
white-space: nowrap;
overflow-x: scroll;
padding: 30px 0 10px 0;
position: relative;
}
.entry {
display: inline-block;
vertical-align: top;
background: #13519C;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
position: relative;
border-top: 4px solid #06182E;
border-radius: 3px;
min-width: 200px;
max-width: 500px;
}
.entry img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.entry:after {
content: '';
display: block;
background: #eee;
width: 7px;
height: 7px;
border-radius: 6px;
border: 3px solid #06182E;
position: absolute;
left: 50%;
top: -30px;
margin-left: -6px;
}
.entry:before {
content: '';
display: block;
background: #06182E;
width: 5px;
height: 20px;
position: absolute;
left: 50%;
top: -20px;
margin-left: -2px;
}
.entry h1 {
color: #fff;
font-size: 18px;
font-family: Georgia, serif;
font-weight: bold;
margin-bottom: 10px;
}
.entry h2 {
letter-spacing: .2em;
margin-bottom: 10px;
font-size: 14px;
}
.bar {
height: 4px;
background: #eee;
width: 100%;
position: relative;
top: 13px;
left: 0;
}
<div class="bar"></div>
<div class="timeline">
<div class="entry">
<h1>1990</h1>
<h2>Entry Title</h2>
<img src="http://dummyimage.com/300x200/000/fff" /> Here's the info about this date
</div>
<div class="entry">
<h1>1995</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2000</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2005</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2010</h1>
Here's the info about this date
</div>
</div>

Answer 2

You can refer the below link also
#import url(https://fonts.googleapis.com/css?family=Dosis:500);
body{
background: #F1F1F1;
}
.container{
width: 1200px;
margin: auto;
}
.timeline{
counter-reset: year 2016;
position: relative;
}
.timeline li{
list-style: none;
float: left;
width: 33.3333%;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Dosis', sans-serif;
}
ul:nth-child(1){
color: #4caf50;
}
.timeline li:before{
counter-increment: year;
content: counter(year);
width: 50px;
height: 50px;
border: 3px solid #4caf50;
border-radius: 50%;
display: block;
text-align: center;
line-height: 50px;
margin: 0 auto 10px auto;
background: #F1F1F1;
color: #000;
transition: all ease-in-out .3s;
cursor: pointer;
}
.timeline li:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: grey;
top: 25px;
left: -50%;
z-index: -999;
transition: all ease-in-out .3s;
}
.timeline li:first-child:after{
content: none;
}
.timeline li.active{
color: #555555;
}
.timeline li.active:before{
background: #4caf50;
color: #F1F1F1;
}
.timeline li.active + li:after{
background: #4caf50;
}
<h1>DevelopersTips</h1>
<div class="container">
<ul class="timeline">
<li class="active">Bacon</li>
<li>Rib</li>
<li>Sausage</li>
</ul>
</div>