Кто бы, что не говорил, но "норвежская красавица" - OPERA, браузер не классический, и чем чаще с ним работаю, тем больше мое мнение об его способностях верно работать с самыми простыми стилевыми правилами подвергается вполне обоснованным сомнениям.

Пришлось, как-то делать простую, обычную казалось бы вещь.

Скриншот

ТЗ проще не куда:

• Плавающая ширина всех колонок.
• Колонки равной высоты.
• Header и горизонтальное меню по ширине вровень с областью контента.
• Все блоки и колонки имеют индивидуальные по цвету - border и фоновую заливку.
• Сто процентная высота макета.

Так как метки-якоря в данном случае не предусмотрены, то для создания иллюзии одинаковой высоты колонок, принято решение использовать:

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

Тут надо сделать маленькое отступление.

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

Все начинается в проблемных – IE6(7) и уж когда все доведено до ума, то просмотр в наиболее популярных и не значительная корректировка часто сводящаяся к переносу некоторых стилевых правил для IE6(7) в секцию хаков.

Единственным исключением является OPERA. Она в списке самая последняя и всегда жду от нее подвоха. Причем, мало что меняется от версии к версии, а это печально :(

Так случилось и на этот раз.

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

А вот поднять правую колонку на уровень header без пинка под зад "горячо" любимой OPER’е не удалось :)

Не привожу ни html-кода ни стилей.

На примерах все достаточно наглядно и убедительно показано и они говорят сами за себя.

Пример № 1 – в OPER’a бесконечная вертикальная прокрутка.

Пример № 2 - везде все в норме, если не считать погрешностей в интерпретации процентных величин различными браузерами.