Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

The Holmes Page Multiple Columns of Text

Web Design Design Tips Programming Tricks Web Page Makeovers



BACK TO
WEB
PROGRAMMING
TRICKS
 You may have noticed that newspapers print text in fairly narrow columns. 
This makes it easier to read under adverse conditions. The oversized paper is usually flopping all over the place. If the lines of text were long you would have trouble moving from the end of one line to the beginning of the next. 
On the other hand, the lines of text on Web pages tend to get a bit wide. This explains the popularity of the left/right split, with the menu on the left-hand side. The menu helps to limit the width of the text on the right-hand side. (This page is an example of the technique.) 
Generally, narrower columns mean increased reading speed. 
Netscape Navigator 3.x provides the <MULTICOL> tag, which displays text in vertical columns. 
<MULTICOL COLS=3 GUTTER=10>
text...text
</MULTICOL>
If you are using Netscape Navigator 3.x, then you will see this paragraph displayed in three columns. Otherwise, this text will be displayed like any other paragraph. Also, notice that you can put an image in CANADA a column and it will align properly (according to the alignment option specified). At this point, I am simply rambling on in order to provide enough text for the effect to be visible... 
 The COLS=n argument is mandatory, but the GUTTER=n argument is optional with 10 pixels as the default spacing between columns. Note also that the effect can be turned on for only a portion of a page; it need not be in effect for the whole page. In fact, if the whole page were displayed with multiple columns, then there would probably be too much scrolling up and down to get to the top of the next column. 
To simulate the multiple column effect in other browsers (IE for example), use a table. One of the problems with this approach (besides the increased amount of HTML code) is that you have to manually "balance" the amount of text in each column. 
This section of the page is presented in multiple columns which are "faked" by using a table. The table contains one row and five columns. The two additional 
 columns are for the spaces between the columns (the gutters). The width of the columns are specified as percentages of the total table width. This sample uses 31%, 3%, 31%, 3%, and 32%. The last column is allowed to be a bit wider, but it will probably not be too noticeable in the browser.
When the browser window is maximized, the version with the <MULTICOL> tag still has the same space between the columns, but in the table version the gutters increase because they are based on a percentage, rather than a fixed pixel width.


Home Web Design Programming Fairlight CMI Soap Box Downloads Links Biography About... Site Map

Site Map Send comments about this site to Greg at gregh@ghservices.com
All pages copyright © 1996-1999 GH Services™   Created 1997/08/04   Last updated 1999/09/30
All trademarks contained herein are the property of their respective owners