В очередной раз ковыряясь с CSS-ужасом, задумывались ли вы о том, что всё это можно было бы сделать гораздо проще ? Простой пример. Есть div, занимающий некоторое пространство. Внутри него нужно разместить 2 div’a так, чтобы первый занимал по высоте столько, сколько нужно его содержимому, а второй – всё оставшееся пространство. Если вы полезли в гугл и стекофервлоу, могу вам сразу сказать – это невозможно. Да, вы не ослышались, нельзя никак этого добиться. Вы можете указывать абсолютное значение высоты первого div’a, можете использовать трюки с overflow:hidden (правда, почему-то советующие это забывают указать, что если ваше содержимое не влезет в блок, то вы его уже не увидите), можете пытаться что-то сделать с абсолютным позиционированием (тут скорее всего у вас отвалится скроллинг), можете играться с padding-top: -30000; margin-top: 30000. Но всегда будете сталкиваться с проблемами. Потому что по-нормальному это сделать вообще никак нельзя. В CSS3 появилась возможность определить размеры используя вычисления типа 100% – 25px. Но чтобы вычесть что-то, нужно это что-то знать, а узнать размер заголовка или другого блока можно только из джаваскрипта. То есть, в 21 веке в 2013 году HTML стал настолько крут, что в нём нельзя описать простейший случай размещения. Facepalm.

Ещё один пример (из недавнего). Есть div, плавающий слева. Есть плавающий справа. Тот, который слева, занимает чуть больше места по высоте, а правый выровнен с ним по верхней границе. А хочется, чтобы они были на одной линии снизу. Опять же, после получаса поисков по stackoverflow приходим к выводу, что этого тоже нельзя сделать! Ни vertical-align, ни различные комбинации вложенных блоков не спасают отца русской демократии. Самым лучшим способом, который работает, опять же становится явное задание line-height в пикселях. Я не знаю, чем думали проектировщики CSS и HTML, но это просто феерия абсурда. Расскажите об этом любому человеку, кто имел дело с WPF, и он будет смеяться гомерическим хохотом.

В общем, я тут подумываю над тем, как можно эту ситуацию исправить, и пока что не нашел более разумного решения, чем написание джаваскриптового движка, который бы поддерживал “Advanced” сценарии размещения, активизируясь при загрузке страницы. Сами правила задавались бы либо атрибутами DOM-элементов, либо как-то отдельно через js. Поискал в интернете что-то подобное, пока ничего не нашел. Как я понимаю, сейчас народ предпочитает продолжать обниматься с кактусом, в лучшем случае используя CSS-фреймворки с сеточной версткой. Но если вы случайно наткнётесь на что-то в этом роде, дайте знать.