“Резиновая” ширина колонок + эмуляция высоты

Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется “резиновая” ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике бывают фиксированной ширины).

И вот недавно такой случай попался. И это меня немножко поднапрягло =) Пытался искать в Интернете решение похожей задачи, но совсем ничего не нашел.

Задача

• Полная “резина”: и ширины страницы, и ширины 2-х колонок (контент + сайдбар).
• Необходимость эмулировать одинаковую высоту колонок. У сайдбара фон в виде серого цвета. Нужно было сделать так, чтобы серый фон всегда тянулся до футера, независимо от количества содержимого в той или другой колонке.

В моем случае было исключено применение метода padding-bottom: 32767px; margin-bottom: -32767px по той простой причине, что я верстал под WordPress, а там используются ссылки-якори, и, в результате применения данной методики, при переходе по таким ссылкам в ряде браузеров с экрана прячется все, что находится до якоря.

Решение

Единственное, что я смог придумать - создать дополнительный пустой блок, который позиционировать абсолютно, придать ему 100% высоты и поместить под сайдбаром, задав соответствующий фон.

Разметка выглядит следующим образом:

Для дополнительного блока #column я написал следующие стили:

В результате получилось то, что мне было нужно, за исключением одного момента. IE6 не умеет растягивать блок на 100% высоты родительского блока, если задано свойство position: absolute. Т.е., как обычно, потребовался костыль. И он был вставлен следующим образом:

Я указал высоту блоку #column не 100%, а значительно больше предполагаемой высоты всей страницы. А для того, чтобы в IE6 этот блок растягивался в принципе, потребовалось указать 100% высоту тегу body.

Пример

Результат, того, что у меня вышло.

В итоге остался единственный недочет - в IE6 мне не удалось “спрятать” ту часть блока #column, которая уходит под футер. Единственное решение, которая я вижу в такой ситуации - прижать “подвал” к нижнему краю окна браузера, однако это не всегда бывает необходимо.

P.S. Буду рад услышать от вас более элегантные варианты решения выше описанной задачи, если таковые имеются.

Обновление от 15.02.09

Благодаря помощи Сергея (за что выражаю ему благодарность), удалось довести макет до кроссбраузерного состояния. В вышеуказанном примере потребовалось сделать всего 3 изменения:

1. Высоту блока в IE6 #column необходимо указать НЕ в процентах:

   1	* html #column {height: 9999em}

2. Сам блок #column нужно перенести в конец контейнера #middle.
3. Сайдбару #sidebar указать параметр z-index, чтобы он был выше слоя #column.

Кроссбраузерный пример.

Тему можно считать закрытой. Все свободны =)