Как верстать, чтобы при добавлении контента НЕ ломалась верстка?

Question

[Дмитрий dimafrontdev]

Всем привет.
Помогите джуну, пожалуйста.
Суть: умею верстать только (сносно) шаблоны с фиксированным объемом текстового контента. Точечки, рюшечки, эффектики-все вроде получается.
Но при добавлении контента сверх того, что было в макете PSD моя верстка, результаты упорного кроссбраузерного труда накрываются сам знаете чем.
Я даже какие-то решения нашел и применил для десктопной версии сайта (типа сверх-огромных padding'ов), но я категорически не знаю что делать с развалившейся версткой на планшете.
итак вопрос:
1) есть ли статья где, видео, туториал, который помогает бороться с этой проблемой?
2) что надо, чтобы побороть мою проблему? Опыт, может прочесть какие книги?

Думаю, все понимают, о чем речь.
Недавно спросил у знакомых программистов че делать, ответ: обрезать лишнее. Ответ не устраивает, ибо, говорят, это решение актуально для тех, кто вообще не понимает профессию верстальщика.
В общем, финиш, коллеги.

Comments

[Stalker_RED]

Резина. Ты не умеешь ее готовить.

[Сергей delphinpro]

Всегда старайтесь избегать фиксированных размеров, особенно высоты.
Никогда не используйте "подгонку в пикселях" для соответствия макету. Их часто рисуют далеко не профессионалы, но даже и профи не всегда выдерживают пиксельную точность в своих творениях.

Первого пункта часто достаточно, чтобы верстка не разваливалась при наполнении.

Собственно это и есть ответ на ваш вопрос. Конечно у вас появится новый - как верстать кроссбраузерно без пикселей =) Но на него позже ответим, когда зададите =)

Answer 1

[gpk]

Без примеров Вашего кода сложно что-то конкретное советовать =)
лично мне существенно помогло разобраться в вёрстке понимание специфики работы:
1) box-sizing:border-box - свойство, без знания которого, у меня постоянно появлялись полосы прокрутки там, где я их не ожидал;
2) display:flex и механизм flexbox - существенно упрощанет верстку списков (как минимум) и вообще любо контента, состоящего из элементов, которые надо выводить на экранах различных размеров.
3)

@media (max-width: 300px) {...} @media (max-width: 600px) {...} ...

- если уж совсем всё плохо, создавайте блоки дизайна нескольких размеров, в зависимости от ширины экрана пользователя, а весь контент выравнивайте по центру.

Answer 2

[ihutornoy]

Попробуйте задать фиксированный height вашим блокам, где разное наполнение при одном и том же оформлении. (Например: блоки товаров с описанием в интернет-магазине).

Answer 3

[Дмитрий dimafrontdev]

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