Как сделать так, чтобы при сужении страницы разные части не наезжали друг на друга?

Question

[nluparev]

Привет.

Я недавно начал знакомиться с версткой и пробую сделать страницу с боковой навигацией codepen.io/SuperManEver/pen/JdJyqV

Я планирую разложить слева меню, как здесь codepen.io/SuperManEver/pen/eNRzrd

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

Спасибо

Comments

[teotlu]

У вас ничто ничего не перекрывает, просто ширина блоков задана в процентах, и они совершенно логично сужаются при изменении размера окна. А вот зачем вам абсолютное позиционирование в данном случае, я не знаю. Но зависит от задачи, иногда так имеет смысл делать (например, если вы для .main зададите overflow: auto, и контент справа будет обладать собственным отдельным скроллом, а сайдбар будет фиксированным).

Ещё рекомендую вам стараться следить за грамотностью в своих вопросах, тогда на них будут охотнее отвечать.

Answer 1

[Денис Инешин]

Для начала min-width, а потом media queries.

Comments

[nluparev]

Я пробовал использовать min-width, но похоже делал это не верно. Может подскажете как-ть туториал где показано как граммотно применят min-width? (можно на английском)

[Денис Инешин]

nluparev: главное правило, применять min-width для родительских элементов. Тогда внутри них, весь остальной контент перестанет наползать друг на друга. Попробуйте для начала навесить его на BODY

[nluparev]

Денис Инешин: понял, спасибо. Попробую

Answer 2

[Ilya Korablev]

Адаптивный дизайн.

Answer 3

[Rodion Svetlitskiy]

Используйте относительные величины (%) для установки ширины ваших блоков.
http://codepen.io/Rodion77/pen/XbgedO

Comments

[nluparev]

а как это отличается от того что применяю я?

Answer 4

[Therapyx]

Как уже выше и написали, посмотри какая ширина самой максимальной строки в твоем меню, таким и сделать min-width: xxPX; для этого блока.