Centering a layer is not that much harder part. It is simple but it is the start of most web page. So it is worth knowing the right syntex that works with almost all browsers today. Following is a sample style that works in all browsers.

CSS Style

1
2
3
4
5
6
7
8
9
10
11
12

 
body {
    margin: 0px;
    padding: 0px;
    text-align:center;
}
 
#outerWrapper {
    width:900px;
    margin:0 auto;
    border:1px #999 solid;
}

The Body

1

<div id="outerWrapper"></div>

Cool ! It is working fine. By the way, I have a absolute positioned layer. Will this work with this idea. No problem buddy. There is nother technique using the negative margin.

1
2
3
4
5
6

#outerWrapper{
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Check wheather is this work for you. Probably it should.

Scroller Preview 1

Scroller Preview 2

Examples :

1. Sample 1
2. Sample 2

Download Link

Link 1 – Link 2

Browser compatibility

Editing the width and height of Scroller

It is just simple to edit the size or any other style of Smooth Scroller.

CSS to change

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#encFilmMain
{
   width:160px; /* full width */
}
#encFilm
{
   height:300px; /* height */
   background-color:#999;
   padding:5px 5px 5px 5px;
}
#encFilmInner
{
   background-color:#efefef;
   padding:5px 5px 5px 5px;
   height:290px;  /* height */
   overflow:hidden;
}

Javascript to change

1
2

var scrollAmount=240;  // scroll amount
var barHeight=290;  //height

If you like or you have any doubts, please do not forget to leave your comment.