3 колонки, высота 100% для каждой

[Raynor]

Подскажите, пожалуйста, как сделать, чтобы все 3 колонки были 100% растянуты по высоте самой высокой из них?

Спасибо.

<div id='wrapper'>
<div id='left'>...</div>
<div id='middle'>...</div>
<div id='right'>...</div>
</div>

Edited March 27, 2009 by Raynor

[Searcher]

Если колонки плавающие то #wrapper {overflow:hidden;}

[Raynor]

Колонки по высоте плавающие, вот сами стили для них:

Бэки у всех колонок сейчас отображаются по высоте контента в колонках, что и хочется избежать - единая высота бэков.

Центральная колонка (middle) - декоративная, без контента, там бэк вообще не отображается.

#wrapper {
	width:1000px;
	margin:0 auto;
	overflow:hidden;
}

#left {
	float:left;
	width:277px;
}

#middle {
	float:left;
	width:38px;
	background: url(...) repeat-y;
}


#right {
	float:right;
	width:685px;
 	background: url(...) repeat-y;
	background-position: right top;
}

[Searcher]

Видимо у вас еще табличное мышление. Вам нужно не блоки по высоте выровнять, а создать иллюзию того что они одинаковой высоты. У вас все фиксированной ширины, так что проще всего будет нарисовать соединенный фон для левой, средней и правой колонок и задать его фоном для wrapper, ну и размножить его по вертикали, соответственно. А для #left и #right задайте прозрачный фон.

[Raynor]

Да, видимо ещё оно, не зря пишу именно в раздел для новичков

Ваш вариант понятен, спасибо, если других вариантов не будет, воспользуюсь.

Но меня прежде всего интересует именно возможность CSS-выравнивания блоков по высоте.

Есть она или нет.

Если есть, пусть даже не самым элегантным образом реализуемая, прошу поделиться знаниями

Спасибо.

[Searcher]

способы зависят от свойств окружающих элементов... универсального я не знаю.

Вот, например, способ, если колонка должна иметь простую однотонную заливку: колонки павной высоты.

[Raynor]

Спасибо. Уже поковырял инет, нашёл описание двух способов здесь: Маниакальный Веблог » Раскладка в CSS: float, Обошёлся без переделывания бэка вот так:

padding-bottom:32767px;
margin-bottom:-32767px;

В FF, Opera - работает, в IE попозже посмотрю.

Edited March 27, 2009 by Raynor