Верстайте блоками!

На сайте CSSblast.ru я увидел такую картинку:

Блочная вёрстка
Блочная вёрстка

Очень правильно.

Правда, вспомнилась шутка, которую я прочитал на IBResource.ru (© Fatcat):

В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и еб*шат друг друга в квейк.

Тем не менее, верстайте блоками:

  1. Сайты — это не таблицы! Не нужно подменять понятия и прилагать сущности не по назначению. Таблицы сойдут для прайс-листов.

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

  3. Сайт славно свёрстан, когда на Web Developer Toolbar из Firefox можно выбрать «Outline Block Level elements» и увидеть простую и понятную структуру страницы, ментальная модель которой компактна и легко помещается в уме. Если на блоках получается слишком сложная вёрстка, нужно менять концепцию в сторону упрощения.

Единственный возможный недостаток блочной вёрстки — при просмотре страницы из клиента, не поддерживающего свойство float, получается не всегда логичный линейный порядок блоков.

На сайте W3C применяется трёхколоночный макет расположения блоков на странице без использования таблиц. В статье W3C Home Page Table-less Layout описана техника создания такого макета.

На сайте htmlbook.ru также есть статьи о том, как создать традиционный трёхколоночный макет без использования таблиц.

Я отказался от двухколоночной вёрстки на плавающих блоках из-за того, что сайдбар рядом с постами блога — это лишняя сущность.

git