Css only vertical timeline

Question

I am working on a vertical timeline with css, can any one help. left portion is getting congested. left portion pointer circle is overlapped with opposite one. Trying to make it with css only. Is there any java-script we can add to make it work. http://jsfiddle.net/cdtHx/ Code: ``` Untitled Document

Accepted Answer

Redefined `.ci` and `.cl` to:

```
.ci {
    position: relative;
    float: right;
    clear: right;/*added*/
}

.cl {
    position: relative;
    /*text-align: right;*//*removed*/
    float: left;/*added*/
    clear: left;/*added*/
}
```

Changed `line div` and `.cl span:after` to:

```
.line div {
    width: 396px;/*changed from 408px*/
    background-color: #ffffff;
    border: solid 1px #B4BBCD;
    min-height: 35px;
    text-align: justify;
    word-wrap: break-word;
    list-style: none;
}

.line:before {
    width: 2px;/*changed from 3px*/
    top: -20px;
    bottom: -20px;
    background: #000;
}

.cl span:after {
    top: 12px;
    left: 392px;/*changed from 404px*/
    width: 9px;
    height: 9px;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #e5e5e5;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}​
```

Updated fiddle: http://jsfiddle.net/cdtHx/1/

Is that what you're looking for?

Css only vertical timeline

Solution

Problem