Hope you've all had a wonderful day!

I'm back with another guide, it will be short and sweet...I hope ^.^.

So from the title, vertical lines. There are two ways to do this and both require the use of < div > tags.

The first requires you to 'turn off' the border lines for top and bottom of the text box and another used the entire text box. Confused? No worries! Let's start!

Method 1: 'Turning OFF' Lines

From text boxes part 1. you may remember that four the 'double' style, you were required to split up the border attributes into width, color and style. We will make use of the 'style' part. Generally, 'style' will only be attached to ONE type, either solid, dotted or double. However, by manipulating this and splitting it into four, you can easily define the 'style' type of each edge of your text box, like so:
 

Here you can see that each lines' style is specified based on the order that the style appears in 'border-style'.

border-style: top right bottom left;
 

So along this line, if you change the top and bottom styles to 'none', you will get two vertical lines on either side of your textbox (use solid for right and left). Simply adjust how far apart they are by using 'width' in the < div > tag.


Method 2: Fill in Text Box

This method uses the entire text box as the vertical line. Simply make the width of the box no more than 5px (any larger and it looks kind of odd), and make the height any value you like.