I am trying to make a simple timeline with only css. Here is a quick photoshop sketch:
HTML:\[code\]<div class="item"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing dignissim purus at adipiscing. </p></div><div class="timeline"></div><div class="item"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing dignissim purus at adipiscing. </p></div><div class="timeline"></div><div class="item"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing dignissim purus at adipiscing. </p></div>\[/code\]CSS: \[code\]body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;}.item{ border-radius:3px; margin:10px; padding:10px; border: solid 1px #EEEEEE;}.item p { color:#333333;}.timeline { }\[/code\]JS-FIDDLE: http://jsfiddle.net/uFPEf/But I cant figure out how to make the line between the boxes, any ideas or solutions are welcome!