HTML Encyclopaedia

Left Margin Control

A common design practice is to use the background attribute of the <body> tag to provide a background that appears as a coloured or patterned stripe down the left hand side of the page. This is easy to do and can be quite attractive.

However it is important to ensure that the text does not appear on top of the coloured stripe. Unfortunately standard HTML does not offer any facility for the control of left (or right) margin widths on a displayed page, neither, apart form using unattractive monopitch text, is there any way of inserting multiple spaces into text. The result would seem to be that it is impossible to avoid the text appearing on top of the stripe with the effects illustrated. There are, however, three techniques by which this problem can be avoided

  1. Enclosing the text in multiply nested <ul> ... </ul> tags. Since list bodies are indented this could achieve the desired effect, however this is not what lists are intended for and the amount of indentation is browser dependent.

    This technique is actually quite commonly employed by "WYSIWYG" HTML editors to provide some form of indentation control. Nested <blockquote> tags can also be used to provide indentation on both the left and right margins.

  2. By putting all the text in a borderless table cell with a separate content-less cell of defined width overlaying the image.

  3. By using a left-aligned image of suitable width and height placed over the decorative left margin. The image can well consist of a transparent GIF with a single pixel.

The technique using tables is probably the best method being the most reliable and not involving unnecessary extra downloads. The single pixel GIF file used for the third method, surprisingly, occupies about 1 kByte. The table method is also the only method that will work for right margins as well as left margins.

Alternatively, if you are sure that all your viewers will be using Microsoft Internet Explorer 3, you can simply use the leftmargin attribute of the <body> tag to set a left (and right) margin explicitly.