css3 min-max width when zooming out pages

[saberExcalibur7]

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.

this is my css code.

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;
}

[simplypixie]

Firstly (this may not resolve your problem). The auto in the margin element should be specified in the #mainContainer div, not in the body and the body needs to be centered using text-align:

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

  margin:0; 
  text-align: center;

  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);

}

[saberExcalibur7]

This is the updated one.

html,body
  {
          height:100%;
          width:100%;   
          margin:0;
        padding:0;

           
   }
body
{
background-image:url(bg3.jpg);
background-repeat:repeat;
padding:1px 0;
box-sizing:border-box;
}
#mainContainer
  {
        background-image:url(bg3.jpg);
        background-repeat:repeat;
        background-color:#999;
        width:70%;
        padding:0;
        min-width:940px;  
        margin:0 auto;
  min-height:100%;/
        -webkit-border-radius: 10px;
    border-radius: 10px;
  }

I want the #mainContainer to limit its width once I zoom it out therefore compressing all of its contents moving it all to the center.
here is the snapshot of how it originally/normally looks like.
http://tinypic.com/r/28wjcci/5
then this what it looks like when i zoom out my browser.
http://tinypic.com/r/102qlcn/5
this is what i want it to look like when zoomed out.
http://tinypic.com/r/2v2uuea/5

.see the difference? =D Basically i think that its the width:70% that causes the dilemma but I cant remove this because my page will then not be liquid with others sizes of screen. i can got what i want it to look if i defined the width or the max-width in px (but then its not applicable for a layout to be liquid)

[Dandello]

The min-width is for how small it can get. Set a max-width as well - but set it high. That way it will be liquid for most screen resolutions, but limited for hugely wide screens.

[saberExcalibur7]

Need help pls..

[Dandello]

Set max-width to a large amount - otherwise it will stay at 70% when larger than 940px. Period!

[saberExcalibur7]

my max width in px or percent?

[Dandello]

In px. Percents will just get wider with window size. But make your max-width BIG, like 1500px or even bigger. What you're doing is making it flexible for laptops and 'normal' monitors, but keeping it from getting getting ridiculously and unreadably wide.