Высокоуровневые паттерны:
Сеточная верстка предписывает выравнивать все горизонтальные и вертикальные края элементов страницы по вымышленной сетке.
Семантическая разметка требует использовать HTML для описания смысла, а не оформления страницы. Оформление при этом должно задаваться в CSS. Мы выясним цели, способы реализации, плюсы и минусы.
Способы выравнивания и реализации сеточной верстки:
Фиксированная вертикальная сетка делит страницу фиксированной ширины (например, 950 px) на одинаковые колонки (например, по 30 px) с одинаковыми отступами между ними (например, по 10 px). Все элементы страницы выравниваются по границам этих колонок.
Типографский набор предписывает разделить страницу на строки фиксированной высоты, равной межстрочному интервалу основного шрифта (например, основной шрифт 12px, межстрочный интервал 16px). Страница верстается так, чтобы текст, набранный основным шрифтом, попадал точно в строки сетки.
Две колонки с помощью margin'а.