Проблемы с обтеканием HTML/CSS

Question

Вы можете помочь мне с этим материалом для упаковки ... Когда я изменил размер окна браузера, все начнет перемещаться. Мне удалось исправить это с помощью этого:

#wrapper { 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
} 

но теперь сайт слишком крошечный. Я хочу, чтобы он был полноэкранным, а не шириной 960 пикселей. Когда я делаю ширину и высоту автоматически, все начинает двигаться снова. Что делать?

Answer 1

Существует проблема о вашем стайлинга, вы используете процент для каждого измерения, это означает, что адаптировать свою позицию, основанную на материнской стороне, родитель размер окна здесь.

Так что это нормально, когда вы не ограничиваете ширину обертки.

Вы можете использовать min-width для обработки этого.

#wrapper { 
     margin: 0 auto; 
     min-width:960px; 
    } 

Answer 2

Обычно этот CSS должен работать:

#wrapper { 
    margin: 0 auto; /*center div => only alternative of your version*/ 
    min-width:960px; 
    width: auto; 
} 

Answer 3

Я подозреваю, что вы хотите что-то вроде этого:
http://codepen.io/simply-simpy/pen/aOyoZM

* { 
    margin: 0 
} 
html,body,wrap { 
    height: 100%; 
} 
.content { 
    width: 960px; 
    margin: 0 auto; 
    background: #eee; 
    height: 100%; 
    font-size: 36px; 
} 
.wrap { 
    background-image: url('https://placeimg.com/640/480/arch'); 
    height: 100%; 
    background-size: cover; 
} 

<div class="wrap"> 
    <div class="content"> 
    <p>Content goes here</p> 
    </div> 
</div>