Как сделать стабильный макет из двух столбцов в HTML / CSS

Я хочу контейнер с двумя столбцами. Подробности:

Контейнер

• Ширина должен быть настроен на 100% от его родительского Eleme nt (легко выполняется).
• Высота должна регулироваться, чтобы содержать оба столбца (т.е. его высота должна быть точно равна большей высоте двух столбцов, чтобы не было переполнения и полосы прокрутки никогда не отображались)
• Должен иметь минимальный размер, равный удвоенной ширине левого столбца.

Колонки в целом

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

В частности, левый столбец

• Должен иметь фиксированную абсолютную ширину в пикселях.

Правый столбец, в частности

• Ширина, должен заполнять оставшееся пространство в контейнере. Другими словами ...
• Ширина должна равняться ширине контейнера за вычетом ширины левого столбца, так что если я помещаю элемент блока DIV внутри этого столбца, устанавливаю его ширину на 100%, присваивая ему высоту примерно 10px и задайте цвет фона, я увижу полосу высотой 10px, которая идет от правого края левого столбца к правому краю контейнера (т.е. заполняет ширину правого столбца).

Требуемая стабильность

Контейнер должен иметь возможность изменять размер (путем изменения размера окна браузера) до минимальной ширины (указанной ранее) или до гораздо большей ширины без нарушения макета. «Нарушение» будет включать изменение размера левого столбца вообще (помните, что он должен иметь фиксированную ширину в пикселях), перенос правого столбца под левый, появление полос прокрутки, блокирующие элементы в правом столбце, не занимающие всю ширину столбца , и в целом любая из вышеупомянутых спецификаций не соответствует действительности.

Предпосылки

Если используются плавающие элементы, не должно быть никаких шансов, что правый столбец будет переноситься под левый, что контейнер не сможет содержать оба столбца (путем вырезания любой части столбца или разрешения любой части столбцов, чтобы выйти за его границу), или что появятся полосы прокрутки (поэтому я бы устал предлагать использовать что-либо, кроме overflow: hidden для запуска сдерживания плавающих элементов). Применение границ к столбцам не должно нарушать макет. Содержимое столбцов, особенно правого столбца, не должно нарушать макет.

Кажется, существует простое решение, основанное на таблицах, но при любых обстоятельствах оно терпит неудачу. Например, в Safari мой левый столбец с фиксированной шириной будет уменьшаться, если контейнер станет слишком маленьким, вместо того, чтобы поддерживать указанную мной ширину. Также кажется, что ширина CSS при применении к элементу TD относится к минимальной ширине, так что если внутри него помещается что-то большее, оно расширяется. Я пробовал использовать table-layout: fixed; не помогает. Я также видел случай, когда элемент TD, представляющий правый столбец, не расширяется, чтобы заполнить оставшуюся область, или он будет выглядеть так (например, третий столбец шириной 1 пиксель будет сдвинут до конца вправо), но установка границы вокруг правого столбца покажет, что она равна ширине встроенного содержимого, а элементы уровня блока с шириной, установленной на 100%, не заполняют ширину столбца, а скорее соответствуют ширине встроенного содержимого (т.е. ширина TD, кажется, полностью зависит от содержимого).

Одно возможное решение , которое я видел, слишком сложно; Мне наплевать на IE6, если он работает в IE8, Firefox 4 и Safari 5.