Transparent Image for Left Margin
Brought to you by the Ecology Spiders

Shifting The Left Margin Of A Page


Using a 1 x 1 transparent image: A common page layout uses vertical borders: a background image defining a stripe of some sort down the left edge of the page, with the document content shifted over to the right of the border. Getting the background stripe isn't hard (see tip on vertical borders,) but shifting your document over to the right can be tricky.

The problem is to extend the left margin of your document so that everything shifts to the right. You can use tables to do the trick.

In this case, we want a two-column table. The first column will be empty, and set to the width of the left margin. The right column will fill the remainder of the page and will contain the actual document.

To fix the width of the first column, you would think that simply setting the width attribute of the tag would suffice. The width attribute serves as advice to the browser, not as a fixed rule. If the column is smaller than 100 pixels, the browser may shrink the column, ruining the effect.

What to do? Create a fixed amount of content using a single pixel transparent image. The 1x1 image is small and easy to download; making it transparent ensures that the column still looks empty. You can see how this works by visiting this sample page. You can also grab the single pixel transparent image from that page, if you don't already have one.

If you choose to use this trick, make sure you set all the table spacing attributes (cellpadding and cellspacing) to zero. Otherwise, you'll have extra space in that first column, and you may have to adjust the width of the transparent image to get your text to show up in just the right spot. Of course, you may want to play with the image width anyway, to get some other special effect.


Go Back


1