Left Border Background Trick

To keep content off the border on left border backgrounds, many people use what has come to be known as the transparent GIF trick. All you do is place a transparent GIF image on the left side of the page to force the content to the right, off the border area.

How It's Done...

<body>
<img src="spacer.gif" width="60" height="1600" align="left">

Under your body tag where you'd normally start your content, use the image tag with the transparent gif. You'll have to play around with the width and height to get them to fit your background's border width and the page length, but that only takes a minute of trial and error.

You can download a transparent gif from inside the table below. Just right click your cursor inside the little box and choose the save image/save picture option.

Now that you know that trick...

...don't use it!

I only put that tutorial here because people still search for it, but there is a much better way to create space at the edge of the page.

A Better Way

You can use CSS to create empty space on any edge of the page, left, right, top or bottom. Suppose you are using a left border background with border pattern that's 130 pixels wide. You can use the following CSS code placed in the HEAD section of the page to create a cushion of space on the left side of the page:

<style type="text/css">
body {margin-left: 150px;}
</style>

With that in the HEAD section of your page a cushion of 150 pixels will keep your content off of your pretty border background, plus allow 20 pixels of gutter space. You can also place the middle line of that code in your external style sheet, or place the code inline directly in the BODY tag. Here's how to use it as an inline style:

<body style="margin-left: 150px;">

You can also add a cushion of space to the other edges of the page, for example:

<style type="text/css>
body {margin-top: 40px;
      margin-right: 70px;
      margin-bottom: 25px;
      margin-left: 160px;}
</style>

You can set the margin (cushion of space) for any or all sides, but if you use more than one they should always be in that order, clockwise starting from the top.

You can also use a table to keep the border clear, or have content on the border and in the main page area with the content of each area staying within its own space. This is useful for adding a navigation system on the left side. You'll find that tutorial here.

Now go tell someone you love them and make their day. Bossy, aren't I? I'm just trying to do my part to make the world a little better. If everyone did, it would be. Think about that.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]