Antigua Web Solutions Blog

How do you make a vertical line using CSS? There are two ways:

1) use a border to an element

2) use an image for the background

Using a Border to an Element

Use Firefox web developer to identify the element. I’ll use the sidebar and make a left border as an example

.secondary {border-left:#ffffff 1px solid; }

borders can be dashed; dotted; double; groove; inset; outset; ridge; solid;

This makes a border to the sidebar BUT it will only stretch as far as there are entries in the sidebar .If your central content extends beyond the content of the sidebar the border will be chopped off. (Images are from a work in progress)

Using an Image as a Background

This has the advantage that the vertical line will stretch to the bottom of the page regardless of whether there is content in the sidebar.

Open up a graphics program and make an image 796px x 20px. Fill with the colour of your page background.

In web developer click on Miscellaneous, Line Guides to find the position your vertical line needs to be. Place the line guide on the left edge of the main content, note the position, then find the position where your line is going to be and subtract to get the distance from the edge of the main content.

Now make a vertical line 1px wide at this position on your image in the colour of your choice.

Save the image in the CSS folder. I saved mine as bg.jpg

Now add this line to the #page and .content elements

background: #151517 url(’bg.jpg’) !important;

The background colour is still there for slow connections where the colour may load before the image - change to whatever your background colour is.

If you need the line to extend through your footer or the header add the above code to the appropriate elements too!