how to use javascript in CSS...

Hi. I've got a page in which the content is within a DIV centered on
the screen. I'm trying to figure out how to deal with the Firefox
issue in which the content shifts to the left whenever the scrollbar
appears.

I found the following bit of code online:

----
var viewport;
var viewport2;

function getViewport(){
// Get viewport width in FF2, Safari 1+, or IE6 w doctype:
if (document.documentElement &&
document.documentElement.clientWidth) {
viewport = document.documentElement.clientWidth;
viewport2 = window.innerWidth; }

// Get viewport width in FF2, Safari 1+, IE5-5.5, or IE6 without a
doctype:
else if (document.body.clientWidth) {
viewport = document.body.clientWidth;
viewport2 = window.innerWidth; }
}
----

I played around with it, and found that "viewport" will give me the
width of the viewing area minus the width of the scrollbar;
"viewport2" gives the width of the viewing area plus the scrollbar.

I'm trying to figure out how to use that information in my CSS
stylesheet. Here's what I'm currently using to position the main
container:

----
#main
{ width: 800px;
margin-left: auto;
margin-right: auto;
}
----

Any thoughts on how to merge the javascript and CSS...?

Thanks much for any help.