Question

http://jsfiddle.net/VjMy8/

Please help me to set the #container to keep in the center of the page so that all other contents under the #container will be on center.

Answer 1

in css:

#container {
    width: xxx em/px/%/...;
    margin-left: auto;
    margin-right: auto;
    /* or margin: 0 auto; */
}

With this method you won’t even need a container, you can do something like this the code below.
This code doesn’t need a float, so it doesn’t interrupt the flow of a page

#div_left {
    width: 25%;
    margin-left: 12%;
}
#div_right {
    width: 50%;
    margin-left: 38%;
}

This method works in every browser in is much easyer then this (older & longer) method:

body {
    text-algin: center;
}
#container {
    width: xxx;
    text-align: center;
}
#div_left {
    width: 30%; /* 30% of the container-width */
}
#div_right {
    width: 70%;
}