how-to #1: draw a thin vertical line on a page

Many pages divide their content into columns, often separated by a thin vertical line, like this:

The main page content here


Here is the news

blah
blah
blah

This effect is easy to achieve but appears to be little-documented. There are two simple ways to do this.

1. the all-browser-compatible way

This is the method implemented in the above example. The text is laid out in a table with three columns, as can be seen if the borders are made visible:

The main page content here


Here is the news

blah
blah
blah

The first, wider column contains the main text, with the third column containing the 'news' section. The middle column contains the thin line, which appears thicker in this example only because the table borders are made visible; normally, you would set the border to have a width of zero in this kind of layout.

The HTML which does this is simple:

<table cellspacing="5" border="0" cellpadding="0">
<tr valign="top" align="left">
<td width="300"><p>The main page content here</p></td>
<td width="1" bgcolor="#00FFFF"><BR></td>
<td width="150" valign="top" align="left">
<p>Here is the news</p>
<p>blah<br>blah<br>blah</p>
</td>
</tr>
</table>

The important points are:

You may find that despite all this, the line still doesn't work correctly in Netscape Navigator 4.x. The way around this problem is to ensure that all the widths of the cells in the table are explicity set. IE can cope without this, but Navigator is a bit more temperamental and sometimes doesn't like it if cells don't have the width set.

2. using a CSS style (recommended)

The above technique works fine even in very early browsers. If you know you are going to be designing for systems using exclusively using a modern browser, then you can use a much simpler technique, which saves fiddling around with the table. All you have to do is set a left (or right) border for a cell in a table. This can be included in a style sheet if you wish. The CSS syntax which produces the result below is:

<TD style="border-left: 1px solid cyan; padding: 5px;">

This style must be applied to all cells which are to have a left border. The result looks like this:

The main page content here

Here is the news

blah
blah
blah

Note that this table only contains two columns, not three. The advantage of this method is that you can have more than one row in the table, and the vertical line won't be interrupted. You should use padding in the style to make space between the line and contents, while in the table cell padding and cell spacing must be set to zero.

The above style won't work if you are using Navigator 4.x (but is anyone really still using that?); it works fine in Navigator 6 and later.

3. vertical and horizontal lines

(Thanks to Dana for suggesting this addition to the page.)

What if you want to have intersecting vertical and horizontal lines on a page? The only ways to do this are to use CSS styles, or to use DIVs, which have their own problems. Suppose you want something which looks like this:

A table with three rows... The second column...
...and two columns... ...also has some text...
...with contents in all cells ...just to fill the cells

This effect (which you won't see in Navigator 4.x) is generated by the CSS border property. The top right and bottom right cell both have a custom class applied which sets the left border to a 1-pixel solid blue vertical line. The middle left cell has another class which has a 1-pixel red top border for the horizontal line. The middle right cell needs both a top border and a left border, so a third class is used to set both. Finally, cell padding is used in the table to put some space between text and borders (note: cell spacing will cause gaps in the lines).

The main problem with this technique is not only that Navigator 4.x won't show it, but that it may cause the table's layout to be rendered incorrectly by that browser. It would be better if Navigator 4.x didn't know anything about those styles, and we can do this by using a separate style sheet called lines.css in addition to the regular sheet used by this page.

How is this done? It's not difficult - use the @import CSS statement to import a CSS external style sheet. Navigator 4.x understands the 'LINK' tag to load an external sheet, but doesn't support @import. Any styles in a sheet loaded this way will not be seen by this browser. The syntax for @import is:

<style type="text/css">
<!--
@import "lines.css";
-->
</style>

and that is the way those styles are used on this page.

Note that the @import command must be enclosed in a <style> tag. The HTML comments are for the benefit of really old browsers. The technique works on Internet Explorer 4.x or later, Netscape 6.1, and Opera 5.11. The style sheet itself can be downloaded from this link:

Download Download lines.css stylesheet (1K)