Centered page with exception

Question

im trying to keep the main div always center but when resizing the browser window to the minimum sizes starting from 900px, how can I make the "main" stay all left and only in bigger screens or above 900px he starts to center the page in the middle?

Thanks in advance

CSS:

body {
   font: 24px Helvetica;
   background: #999999;
   min-width: 900px;
   margin: 0;
  }

#main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
}


header {
    width: 100%;
    background: yellow;
    text-align: center;
}

nav {
    width: 20%;
    min-width: 120px;
    max-width: 300px;
    float: left;
    height: 600px;
    background: orange;
    text-align: center;
}

article {
    width: 80%;
    min-width: 400px;
    max-width: 1200px;
    float: left;
    height: 600px;
    background: yellow;
    text-align: center;
}

footer {
    width: 100%;
    float: left;
    height: 100px;
    background: blue;
    text-align: center;
}

HTML:

 <header>header</header>
 <div id='main'>

     <nav>nav</nav>
     <article>article</article>

 </div>
 <footer>footer</footer>

Answer 1

You can use the following media query:

#main {
    clear: both;
}

@media screen and (min-width: 900px) {
    #main {
        margin:auto;
        width: 900px; // will need some sort of width adding either here or above for a default width
    }
}

Example

Answer 2

Sorry, the language in your question starts to get a little confusing with the typos. So what is clear to me is that you want some CSS to apply below a certain screen width and other CSS to apply above a certain screen width. This can be achieved using media queries. Please see below:

The following CSS applies to screen with widths up to 900px.

@media only screen and (max-width: 900px) {
  #main {
    margin-left: 0;
    margin-right auto;
    clear: both;
  }
}

The following CSS applies to screen with widths over 900px.

@media only screen and (min-width: 900px) {
  #main {
    margin-left: auto;
    margin-right: auto;
    clear: both;
  }
}

You can read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Hope this helps.