[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 139
  • Last Modified:

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.

  • 4
  • 4
1 Solution
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...
How about the dimensions of the table? Fixed, or percentage of the page width?
Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

TheRookie32Author Commented:
fixed at 800 pixel width...
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;
            obj.style.left = ((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?
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...


Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now