Design & Publishing . / . WEB . / . Tips & Tricks Index . / . Wide Left Margins

Wide Left Margins & Page Templates... Answers to Questions downloading graphics... in WebDesign & Review Tips & Tricks

“How do they do those pages with the wide border down the left side of the paper?”

We began teaching this technique in late ‘94 but it’s still a very frequent question. Here’s how:

1) Create the background.
You'll need a non-transparant gif file that is as small as possible... 4 to 6 bits max. Usually use only three to six colors.

This file should be at least 1,000 pixels wide, by no more than 10 pixels deep. (Our example will be 1,000 x 4)

Paint the file so that the browser-safe color on the left-end is what you want for your "border". You can also use a ‘safe’ fully optimized texture.

2) Call it in your HTML
You will ‘paint’ the entire background with your file, then call a compatible background color using the Body/Background tag:
We want to send the background color incase the file doesn’t come down on the readers’ browser.

3) Arrange text on the page.
Use either tables or a definition list to move the text over, out of the margin. A table used with a wide margin will allow a narrow column of text or buttons to reside in the color area itself.
4) Eliminate Alignment Problems
The easiest way to make sure your text aligns with the margin is to set up a three-column table. The first column, (which overlaps the color margin you've created) can contain information in the margin area if you like.

The center column acts as "buffer" and bridges the margin into the content area. Make sure it's at least 6 pixels, or holds the right column at least 10 pixels away from the border. (Add some CELLPADDING, but not much.)

You'll also want to turn the borders off <TABLE BORDER="0"> to make the table invisible.
5) Test it.
It can be helpful to create a screen capture of the page with table in place as a template for the completion of the background file. We also stress the 10-pica "buffer" since browsers have different offset dimensions between the true edge of the window and content start. The AOL browser is a horrendous offender for pushing the content over into the border, so all care is urged.
6) Available solutions.

One of the best collections available anywhere for under 50-bucks is the wonderful
Indigo Storm collection.

There are some canned solutions you can play with like the WebStationery templates developed by Christopher Hunt, Drop in on his web site and have a look around.

"Webpaper" from Jay Boersma is another collection, along with other page creation tools: http://www.ECNet.Net/users/gas52r0/Jay/home.html#gifs. These files are also available in most shareware sites like America Online,,, or So we won’t post them here.
Give it a try, and give us a look.

Design & Publishing . / . WEB . / . Tips & Tricks Index

Interested in having your web page critiqued? Send email to:

Interested in getting published?
If you'd like to publish in the pages of WebDesign & Review then capture and read our "Readers Guidelines" found here, or from our On-Demand Documents Desk by sending e-mail to ...Put the word HOSPITALITY, and GUIDELINES in the subject area.

Thank you for visiting WebDesign & Review at
Notes: The screen shots herein represent the copyrighted works of their respective owners, and are used here for editorial demonstration purposes. please read and be aware of our Legal Properties & Disclaimers document. Not all areas of the online environment allow special characters such as the registration and trademark marks. This file will alert you to proprietary works that cannot be duplicated or distributed. Copyright 1996, 1997, 1998, Showker Graphic Arts, for the The Design & Publishing Center, ALL RIGHTS RESERVED. WebDesign & Review, Pixelsmith, WebEye are all trademarks for The Design & Publishing Center. Other products mentioned in these pages are the registered trademarks of their respective owners.