Id like to put a border around my website and have it centered in the middle of the page.

Should i just add a table border to the outermost table?  I tried that but it is too thick.  I am using DW, Fireworks, and Visual Studio.NET.  I would also like to have the page background be a light greyish color but the contents of my site be un-affected.

Who is Participating?
Okay, then a little bit of JavaScript will be needed. Here's a function you can place in the head of the document:

<script type="text/javascript">
function centerDiv(div)
      var obj=document.getElementById(div);
      var pageWidth = document.body.offsetWidth ? document.body.offsetWidth : window.innerWidth;
   = ((pageWidth - obj.offsetWidth) /2)+'px';
<body onload="centerDiv('layer1');" onresize="centerDiv('layer1');">

<div id="layer1" style="position:absolute;top:50px;left:0px;width:800px;background-color:#CCCCCC;">

... table here ...


This dynamically centres the layer when the page is loaded, and when the window is resized (note, however, that 'onresize' isn't a valid HTML 4.01 attribute). If the window is narrower than the table, the table's left edge is set at zero pixels from the left of the window.

Will that suffice?
Hi Rookie,

I suggest a CSS-based approach to kill both these birds with one stone. Use a layer to contain the table, then you can give it its own background colour. The questions to be asked first, are:

1 - should the table be centered vertically as well as horizontally?
2 - is the table of fixed dimensions, or a percentage of the page width?

For a table that's horizontally-centered only, and percentage width, the code is very simple:

<div id="layer" style="position:absolute;top:50px;left:20%;width:60%;background-color:#CCCCCC;">

... table code here ...


Of course you can use percentages for the top and height as well, though results can vary among browsers when you do this.  If you require a fixed-dimension layer to be centered, a wee bit of JavaScript will be required...
TheRookie32Author Commented:
I would like it to be just a bit off the top of the browser, mainly centered vertically so it is centered on different screen widths...
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

How about the dimensions of the table? Fixed, or percentage of the page width?
TheRookie32Author Commented:
fixed at 800 pixel width...
TheRookie32Author Commented:
Yes thanks a lot!  

Is there any way to apply it to all the pages in the document without having to add the code to the top of all the pages?  I only have about 10 so not a big deal...

Should have created a page template when i first started...  i do have my whole page surrounded in a table so if i could apply a style to that it would be cool.  If not ill add the code to the top of each page as that is exactly what i want it to do!  Wonder if i can make the default page a template and it will apply all the styles down the line...
Why certainly. You can put the JavaScript in an external file, much like you do with CSS.

Just take everything inside the <script> tag (except the <!-- and //--> bits, you can dump them too) and cut'n'paste them into a separate file, which you save as centerDiv.js or similar (extension _must_ be '.js'). You can open a new JS file from Dreamweaver's New Document menu.

To call the file from each page, just insert this line where you had the original <script> tag:

<script type="text/javascript" src="centerDiv.js"></script>
TheRookie32Author Commented:
So i hope you still look here at this.. i had another question and was hoping for a similar solution as far as importing the JS from another file but its not as important cause its only in the header which is a user control...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.