В Google Chrome не работает заполнение контейнера контейнера

Question

У меня есть шаблон с фиксированной шириной по центру, и я хотел применить отступ 10px слева и справа от "основного" div.Чтобы на маленьких экранах сайт не касался левой части экрана.Он работает в IE, Firefox, Safari, Opera, но не в Google Chrome.

Вот соответствующий код:

<style type="text/css">
  #main {
    padding:0 10px;
  }
  #wrap {
    width:980px;
    margin:0 auto;
  }
</style>
<div id="main">
  <div id="wrap">
  </div>
</div>

Я пробовал различные комбинации CSS, но безуспешно.Вы можете посмотреть фактическую страницу здесь .(может измениться в будущем!)

Спасибо!

Answer 1

Лучше определить min-width в #main вместо padding следующим образом:

#main {
    min-width:1000px;
  }

Answer 2

В этом случае он не работает ни в одном браузере, поскольку страница фактически прокручивается вбок, несмотря на появление разрыва в 10 пикселей.По крайней мере, я так поступаю в Safari и Chrome.

Вместо этого - то, что вы хотите использовать, это max-width.Это не позволяет ширине превышать 980 пикселей, но позволяет прибегать к ширине: автоматически до этой точки.

#wrap {
    max-width: 980px;
    margin:0 auto;
}

max-width совместим со всеми основными браузерами, включая IE7 +

. Вам также следуетоформлять медиазапросы CSS для обработки экранов меньшего размера: http://css -tricks.com / css-media-query /