HTML Hot Tip: Shifting The Left Margin Of A Page

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 my tip on vertical borders), but shifting your document over to the right can be tricky.

In general, the real problem is to extend the left margin of your document so that everything shifts to the right. Until style sheets make this a trivial issue, you can instead 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 <td> tag would suffice. The HTML would look something like this:

     <table border=0 cellpadding=0 cellspacing=0 width="100%">
     <tr>
     <td width=100></td>
     <td>
     Real document content goes here
     </td>
     </tr>
     </table>

In fact, 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. The final solution looks like this:

     <table border=0 cellpadding=0 cellspacing=0 width="100%">
     <tr>
     <td><img src="trans1x1.gif" width=100></td>
     <td>
     Real document content goes here
     </td>
     </tr>
     </table>

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, just as I did. 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 fiddle with the image width anyway, to get some other special effect.