css3 min-max width when zooming out pages

Question

A good day to you. I am working on a webpage but I got stuck on defining the max and min width. Basically I would want my page to be centered in when zooming out the webpages like what most webpages does. Please need expert help.ASAP thanks.

body
{
  height:100%;
  width:100%;

  margin:0 auto; 
  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}

#mainContainer
{
background-image:url(bg3.jpg);
background-repeat:repeat;
background-color:#999;
width:70%; /*default width in percent for a liquid layout.
the problem is when I zoom out the page the width remains to be in 70% therefore forcing the contents to be pushed to the left corner instead of being centered.*/
min-width:940px; 
margin:5px auto;
height:100%; 
padding:0 1% 0 1%; 
-webkit-border-radius: 10px;
border-radius: 10px;
}

Answer 1

basically this can only be achieved via script.

Get the 70% width of the browser's screen. Convert that width into its corresponding px value Set the max width of the #mainContainer using the value got from the conversion/calculation.

$( document ).ready( function(){
setMaxWidth();

function setMaxWidth() {
$( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

-thanks to Esailija link