Helping ordinary people create extraordinary websites!
HOME TUTORIALS SCRIPTS WEB HOSTING BLOG FORUM
Get Our Newsletter
Email:

Indenting the Whole Page

If you want the entire page indented, set a style rule which sets right and left padding for the <BODY ...> element. For example, this style sets the right and left padding to 100 pixels:

this code produces this
<STYLE TYPE="text/css">
<!--
BODY
   {
   padding-left: 100px;
   padding-right: 100px;
   }
-->
</STYLE>
this page

This technique is popular when used in combination with a background image. For example, suppose we want the following image to run down the left side of the page (as it does on this page):

Blue edge
This image is 56 pixels wide, so let's set the padding to 60. The following style sets the background image, sets the repeat to repeat-y (only repeat vertically down the left side of the page) and sets the left padding to 60 (we won't set the right padding).

<STYLE TYPE="text/css">
<!--
BODY
   {
   background-image:url(blue.edge.gif);
   background-repeat:repeat-y;
   padding-left: 60px;
   }
-->
</STYLE>

Copyright 1997-2002 Idocs Inc.