Сцентрированная страница с исключением

Question

im, пытаясь сохранить главный div всегда в центре, но при изменении размера окна браузера до минимального размера, начиная с 900 пикселей, как я могу сделать «основное» пребывание остальным и только на больших экранах или выше 900 пикселей начинает центрировать страницу посередине?

Заранее спасибо

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

Вы можете использовать следующий запрос: медиа

#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

Извините, язык в вашем вопросе начинает немного путаться с опечатками. Поэтому мне ясно, что вы хотите, чтобы какой-то CSS применялся ниже определенной ширины экрана и другого CSS для применения над определенной шириной экрана. Это может быть достигнуто с помощью мультимедийных запросов. См. Ниже:

Следующий CSS применяется к экрану шириной до 900 пикселей.

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

Следующий CSS применяется к экрану с шириной более 900 пикселей.

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

Вы можете прочитать больше о медиа-запросах здесь: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Надеется, что это помогает.