Из огромного множества реализаций синтеза HTML и CSS, можно выделить следующие: блочная вёрстка, табличная вёрстка (да, она всё ещё жива), адаптивная вёрстка и резиновая вёрстка.
Собственно, начнём по-порядку. Блочная вёрстка представляет из себя набор блоков, зачастую это элементы <div> с определёнными Css-свойствами. Основной и самой привлекательной особенностью такого вида вёрстки является то, что какой бы монитор не использовался при просмотре веб-страницы, созданной при помощи этого стиля вёрстки, она на всех мониторах отобразится в первозданном виде… нет, не в смысле, что будет идеально подходить под каждый монитор. То есть она будет всегда одного размера, как задал веб-мастер высоту страницы в 1024 пикселя, так тому и быть, на каком мониторе не открывай — везде будет 1024, даже если это какой-нибудь монитор от macbook с очень высоким разрешением. Это как бы и есть ещё суровый недостаток, ведь технологии не стоят на месте, но не все могут идти с ними в ногу и у вас встаёт делема, на кого оринетироваться при создании сайта с использованием такой вёрстки? На этот вопрос нет верного ответа, так что решать вам придётся самостоятельно. Концепция этой вёрстки такова, что всем элементам <div> задают точные размеры в пикселях, то есть масштабирование сходит на нет. Всё же эта вёрстка неплоха, при условии, что сайт достаточно большой и размеры подобраны адекватно. Некоторые интернет-магазины до сих пор этот тип вёрстки используют, так что она более чем жива даже сейчас.
Табличная вёрстка. Как уже заявлялось выше — как только увидите сайт с довольно странным расположением элементов — смотрите в код, скорее всего это поделие очередного горе-верстальщика. Серьёзно, этот вид вёрстки из тех времён, когда по земле ходили динозавры, а дизайн сайтов делался целиком через html… Нет, не атрибутом «Style», были теги <font>, <height> и так далее. Однако, не стоит клемить сайт и его создателя, вполне возможно, это связано с тем, что верстальщик банально не знал JavaScript и табличная вёрстка была единственной возможностью сделать сложное меню, тогда это простительно. Но если дизайн не особо сложен и отсутствует css-файл оформления, то знайте. Либо перед вами реликт, либо гений, который решил наплевать на все современные стандарты веб-дизайна и пойти своим путём… в никуда!
Адаптивность — нововведение в HTML5, то есть большая часть элементов адаптивны изначально, все строчные и некоторые блочные элементы адаптируются под экран и соотношение сторон экрана автоматически. Так же, если дизайн сложноват и стандартами HTML не обойтись — на помощь приходить CSS-функция @media. Она позволяет задавать отдельные своды правил под условия устройства. Например, под ширину экрана или окна браузера, на само наличие экрана, то есть можно отдельно создать версии ваших веб-страниц для печати. Это на данный момент самый оптимальный (хоть и сложный в реализации) способ сайтостроения, одновременно хорошо отображающийся на всех видах устройств (почти всех, всё ещё не вышли из обихода те, что частично или полностью не поддерживает CSS. Кстати, не стоит забывать об особенностях телефонов и планшетов, то есть разрешения бывают разные и их много, то есть сразу под все соотношения не сделаешь версию сайта, ибо слишком долго. Тут на помощь приходит JS, позволяющий «на лету» менять некоторые значения элементов страницы, подгоняя их под экран, но тут опять же надо знать JS.
Ну и наконец — резиновая. От адаптивной отличает то, что она на любом сколь угодно маленьком или большом устройстве будет выглядеть одинаково. Круто? Ага! Вы можете сделать сайт как для маленького мобильника, так и для огромного экрана, размером 16 метров на 9 метров. При чём без особой потери качества, разумеется если вы используете по минимуму растровых элементов графики.
В целом не могу рекомендовать этот вид вёрстки. Он по многим параметрам проигрывает адаптивному. Но если вам нужен именно что сайт, который везде будет выглядить идентично, то резиновая вёрстка для вас!