dreamweaver templates | responsive designs | frontpage templates | expression web templates | wordpress templates | css templates | website templates

Home > Help files >> Adding vertical lines

Vertical lines

You've probably seen that on some of our templates and on many other sites vertical lines are used to separate content. It would be simple just to add a graphic but if you want the line to expand with the content then it's not much more complicated and can give a cool and functional effect. Here's an example so you know what we're talking about:

This where you can put your left hand content. Maybe you need to separate your menu from your main body text. As you type the line in the center gets longer. This where you can put your left hand content. Maybe you need to separate your menu from your main body text. As you type the line in the center gets longer.

This where you can put your right hand content. Maybe you need to separate your news from your main body text. As you type the line in the center gets longer. This where you can put your right hand content. Maybe you need to separate your news from your main body text. As you type the line in the center gets longer.

All you need is a table - here with three cells - and a transparent gif.

In the 3 cell table set cellpadding to 0 and cellspacing to whatever you like so the text doesn't touch the line - in the above example we've set it to 6.

Set the background of the center cell to the color you require for your line and then place the transparent gif into the cell and make sure its width and height are set to 1 pixel. Here a transparent gif you can download - it's inside the blue border - so you know where to right click to save.

Now set the middle cell width to 1 and put some text in the outer two cells to see how it expands - that's about it - pretty easy and you have a simple way of separating your content.