Blogger Centering Nightmare!

Hi Guys

I'm new to Blogger and could do with some help on something that is really frustrating me! I am trying to get my blog to be centered in the middle of the screen / browser. I want it to be centered horizontally so that there is white space on the left and on the right.

On my screen (1440 x 900) it looks perfect using and internet explorer however it is aligned to the left on mozilla - argh! Likewise, on some friends laptops it looks fine, but on screens that are more "square" it aligns to the left again.

I have traulled the web but having no luck. Thought someone on here MUST be able to help! Thank you in advance

Here is part of the code (please let me know if you need any of the rest):


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
border:
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:0px 0px 0;
padding:0px 0px;
line-height:1.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 0px 0px;
padding:0 0px 0px;
max-width:900px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: 600px;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding:0px;
text-align:$startSide;
font: $bodyfont;
overflow:auto;
overflow-x:hidden;
}

#main-wrapper {
width: 620px;
padding: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
padding: 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:0px;
height:270px;
overflow:auto;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin:0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height:0;
}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:0px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

 

You can see the part of the code saying outer wrapper

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding:0px;
text-align:$startSide;
font: $bodyfont;
overflow:auto;
overflow-x:hidden;
}

Code (markup):

Here, you must take off all the margin: definitions and put a single one like this,

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin: 0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
overflow:auto;
overflow-x:hidden;
}

Code (markup):

Check it out now.

 

dmssrinivas,

you're a star - that seems to have fixed the issue. It's now displaying in the center on IE, firefox and safari.

thanks for your prompt reply