5-я причина объективная, логику создателей CSS порой понять очень трудно. Блочная модель, считающаяся "изнутри наружу" (ширина задает ширину контента, а паддинги и бордеры плюсуются к ней сверх) — лишь одно из таких мест (хотя, пожалуй, самое заметное). Есть еще одна объективная причина — в современном CSS нет механизма специально для компоновки блоков, в основном он "заточен" под оформление текста, и для типовых задач верстки приходится использовать инструменты не по назначению (напр. делать колонки "как бы врезками"). Ну и вечная проблема старых браузеров, само собой (впрочем, с таблицами в них тоже хватает своих "приколов").
Выравнивание высоты колонок — проблема известная, теме "equal height columns" (кое-где именуемой ни много ни мало "Граалем вёрстки") посвящены гигабайты статей. В простых случаях однородного фона часто довольствуются имитацией равной высоты с помощью фоновой картинки для контейнера (метод "ложных колонок" — "faux columns") или с помощью бордеров, http://jsfiddle.net/6KE6M/. Для более сложных случаев — http://chikuyonok.ru/2009/06/float-columns/.
Vertical-align работает, но по-разному в разных ситуациях. В ячейках таблиц оно выравнивает содержимое относительно ячейки (как атрибут valign), а для строковых элементов — http://usabili.ru/news/2010/02/20/vertical-align.html (по умолчанию картинки, элементы форм и инлайн-блоки выравниваются по базовой линии текста, а с помощью vertical-align можно выровнять их по центру, верху или низу строки, а также поднять/опустить относительно базовой линии на заданную величину).
Цитата(nns2009 @ 15.10.2011, 19:16  ) | | 1) Содержимое "Заголовка" верикально выровнено по середине и выглядит примерно так: |
Как вариант: text-align: right (для меню) + float: left либо position: absolute с подходящими координатами (для логотипа) + достаточно большой line-height (для вертикального центрирования).
| Цитата(nns2009 @ 15.10.2011, 19:16 ) | 2) Левая колонка не подстраивается под ширину правой (но как сделать подстраиваемость тоже хотелось бы узнать) и имеет фиксированную ширину
3) Правая колонка занимает остаток места |
Как вариант — см. http://jsfiddle.net/6KE6M/2/. Для "подстраиваемости" нужно задавать ширину в процентах, правда, тогда не получится имитировать колонку бордером, но это решаемая проблема.
| Цитата(nns2009 @ 15.10.2011, 19:16 ) | | Есть отступы padding |
Универсальный вариант — вложить в каждую колонку еще один оберточный div и задать отступы ему. Современный, но, увы, еще не достаточно кроссбраузерный подход — http://cssing.org.ua/2008/11/14/css3-box-model-progress/#more-206. Еще можно (и нужно;) использовать тот факт, что без явного указания ширины блок вписывается в предка (сумма ширины контента, паддингов, бордеров и маргинов равна внутренней ширине родительского элемента).
| Цитата(nns2009 @ 15.10.2011, 19:16 ) | | Желательно, чтобы для изменения какой-либо характеристики... достаточно было бы изменить как можно меньше чисел |
А вот здесь почти всегда придется искать компромиссы. Часто "идеологически чистые" и предельно гибкие в теории решения оказываются недостаточно кроссбраузерными и т.п. Но всегда есть возможность приблизиться к совершенству еще хоть на пиксель!  |
(в интернете не нашёл ничего, удовлетворяющего условиям).
