Как создать стабильную структуру двух столбцов в HTML/CSS

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

Контейнер

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

Столбцы вообще

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

Левый столбец специально

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

Правый столбец специально

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

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

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

Фон

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

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

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

Ответ 1

Здесь вы идете:

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>

Ответ 2

Мне все равно было бы интересно об IE6, как долго поскольку он работает в IE8, Firefox 4 и Safari 5

Это делает меня счастливым.

Попробуйте следующее: Live Demo

display: table на удивление хорошо. Когда вы не заботитесь о IE7, вы можете использовать его. На самом деле у него нет обычных минус <table>.

CSS

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}

Ответ 3

Кусок торта.

Используйте 960Grids Перейдите в автоматический макет и сделайте двухстоечный дизайн жидкости. Создайте левый столбец до ширины сеток, которые работают... это единственная проблема с использованием сеток, и это очень легко, когда вы читаете учебник. В двух словах каждый столбец в сетке имеет определенную ширину, и вы устанавливаете количество столбцов, которые хотите использовать. Чтобы получить столбец с определенной шириной, вы должны настроить свою математику так, чтобы ваша ширина столбца была точной. Не слишком жестко.

Нет шансов на обертку, потому что другие уже сражались за эту битву за вас. Совместимость назад, насколько вам, вероятно, когда-либо понадобится. Быстро и просто... Теперь загрузите, настройте и разверните.

Voila. Grids FTW.