Make Vertical Line With HTML CSS or JavaScript

Question

I've noticed vertical lines like in the website trippeo.com if you scroll down to where it says "increase traveler loyalty..." and then has a vertical line below. How would you create a long line like that in web design? Would you need to make an image and absolute position it or is there a better way with HTML, CSS, and or JavaScript?

Answer 1

You can do in two ways:

1. Background Image aligned to right and repeated across y-axis.

   .main-liner {background: url("bg.png") repeat-y right top transparent;}
   

2. Border

   .main-liner {border-right: 2px solid #f00; margin-right: -2px;}
   

Preview:

Fiddle: http://jsfiddle.net/praveenscience/RU42F/