Facebook Timeline style with CSS

#1 Supported Chrome, Firefox, Safari, Opera. And IE9 & above.

<div class='container'>
<div class='margin'></div>
<ul class='timeline'>
  <li>the content and other elements here</li>
  <li>even elements will be on right</li>
  <li>yep, odd elements will be on left</li>
</ul>
</div>

#2 By using li:nth-child even and odd selector, you don't have to add extra class declaration for li elements like class="left" or class="odd"
```
li:nth-child(even){
  float:right;
  clear:right;
}
li:nth-child(odd){
  float:left;
  clear:left;
}
```

#3 Here I used li element has 450px with border-radius: 4px.

.timeline > li{
  width:450px;
  border-radius:4px;
  position: relative;
}

#4 the bubble speech style elements don't use any image. It is just the borders. using pseudo element :before to create triangle
```
.timeline > li:before{
  border:7px solid;
  content:'';
  display: block;
  position: absolute;
}
```

#5 using :before pseudo for both even and odd elements to show left and right triangle.

.timeline > li:nth-child(even):before{
  border-color:#fff #e5e5e5 #fff #fff;
  right:100%;
  top:10px;
}
.timeline > li:nth-child(odd):before{
  border-color:#fff #fff #fff #e5e5e5;
  left:100%;
  top:10px;
}

HTML: Full Source

<div class='container'>
<div class='margin'></div>
<ul class='timeline'>
  <li>the content and other elements here</li>
  <li>even elements will be on right</li>
  <li>yep, odd elements will be on left</li>
</ul>
</div>

CSS: Full Source

.container{
  position: relative;
  overflow: hidden;
}

.margin{
  height: 100%;
  position: absolute; 
  left: 50%;
  width: 2px;
  background: #2A3036;
  bottom: 10px;
  margin-left: -1px;
  z-index: 1000;
}

ul.timeline{
  width:920px; /* total width */
  position: relative;
  list-style: none;
  overflow: hidden; 
  padding: 0px;
  margin: 0px;
}

.timeline > li{
  width: 450px;
  background: #2A3036;
  position: relative;
}

.timeline > li:before{
  border: 7px solid;
  content: '';
  display: block;
  position: absolute;
}

li:nth-child(even){
  float:right;
  clear:right;
}
li:nth-child(odd){
  float:left;
  clear:left;
}

.timeline > li:nth-child(even):before{
  border-color: #fff #e5e5e5 #fff #fff;
  right: 100%;
  top: 10px;
}

.timeline > li:nth-child(odd):before{
  border-color: #fff #fff #fff #e5e5e5;
  left: 100%;
  top: 10px;
}

Final Result on this page

My demonstration may not be exactly like Facebook Timeline but you can get timeline alike with small lines of css and you can add more css to modify this existing code to be exactly look like Facebook Timeline.

If you have any suggestion to improve this code, feel free to contact me via htun.me and you can also follow me on Twitter @myokyawhtun

Download sample file or browse demo

Written by Myo Kyaw Htun

Tweet