Верстка макета с колонками

Question

[Paulskit]

Есть следующий макет
.
Нужно сверстать его следующим образом.
Блок 1 фиксированных размеров.
Блоки 2-4 тянутся по высоте в зависимости от контента. Причем, если, например, в блоке 3 контента очень много, а в остальных мало — все равно блоки 2-4 должны тянуться вниз, таким образом, чтобы синий бекграунд внизу всегда был на 1 линии.
Тексты внизу 3 и 4 блоков — фиксированы.
Самый простой вариант — сверстать на таблицах, однако появляется проблема с абсолютно позиционированным текстом внизу блоков 3 и 4.
Каким образом решается такая проблема?

Comments

[Paulskit]

Выравнивание по высоте удалось решить с помощью habrahabr.ru/qa/41678/#answer_158460, но остается проблема с фиксированным текстом внизу.

[Paulskit]

Суть проблемы: jsfiddle.net/K6vpM/3/
Как фиксировать текст именно внизу видимого блока?

[Paulskit]

Решение следующее.
Высота колонок задается методом, описанным в комментарии помеченном как решение.
Проблема фиксированного размещения текста внизу решается выносом текста в общий блок и позиционированием с помощью absolute.
Рабочий пример:
jsfiddle.net/K6vpM/4/

Answer 1

[4NATIC]

habrahabr.ru/post/64242/
habrahabr.ru/post/64173/

Comments

[Fr3nzy]

Первый вариант применял много раз. Были проблемы только с CSS3PIE, но и они уже устранены.

[Paulskit]

Очень круто. Не до конца понятно почему работает, но вроде то, что нужно.

Answer 2

[Роман Мисюра]

Как вариант через jQuery сделать.

Comments

[Paulskit]

JS вариант, не спорю, но хотелось бы обойтись средствами css.

Answer 3

[Chii]

Я бы сделала длинный тонкий блок 5 в самом низу, шириной в 2+3+4 и положила бы в него и синий бекграунд линией и тексты
Но я не очень крутой верстальщик, может кто-нибудь лучше придумает способ

Answer 4

[Сергей]

htmlbook.ru/samlayout/tipovye-makety/kolonki-odinakovoi-vysoty
web-utils.net/css-hack/div-vertical-align-middle-and-bottom
Я не специалист, но возможно поможет

Answer 5

[Николай Васильчук]

chikuyonok.ru/2009/06/float-columns/