CODEWITHSUNDEEP
javascripthtmlcssline
etangins
etangins

Reputation: 624

Make Vertical Line With HTML CSS or JavaScript

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?

Upvotes: 0

Views: 4051

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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/

Upvotes: 2

Related Questions