Резиновая и жесткая колонки в любом порядке

Век живи — век учись (и дураком помрешь)... В учебниковой статье про float'ы я описывал два варианта "резиновости" колонок: когда их ширины заданы процентным соотношением, и растягиваются все вместе, и когда растягивается только одна основная колонка, а остальные имеют фиксированную ширину.

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

А сегодня наткнулся на статью Меттью Левина на "A List Apart", где описывается, как это можно сделать. Читать ее надо обязательно, а я постараюсь кратко изложить принцип по-русски.

Принцип я покажу на двух колонках (на ALA рассматривают на трех).

<div id="container">
  <div id="main">...</div>
  <div id="sidebar">...</div>
</div>

Суть нужной резиновной раскладки в том, что одна из колонок должна иметь ширину "весь контейнер минус константа". Поскольку прямого способа это сделать в CSS нет, я предлагал оставить основную колонку в потоке с автоматической шириной и дать ей боковой фиксированный padding, который будет откладываться внтурь. Это и дает нужный эффект. Но как раз то, что блок остается в потоке, не дает поставить его в HTML первым перед боковушками, потому что тогда они будут начинаться ниже основной колонки (у меня в статье есть картинка).

#main {
  background:red;
  padding-left:200px;
}

#sidebar {
  background:blue;
  float:left;
  width:200px;
}

Левин делает по-другому.

Во-первых, основной блок таки float'ится, и ему ставится ширина 100%. А вот место под боковые колонки делается с помощью padding'ов в контейнере. Ширина содержимого контейнера при этом уменьшается, и именно в нее укладывается этот основной float.

Но боковые колонки все еще идут ниже основной, потому что та занимает 100% доступной ширины. Вот тут идет гениальная штука. Если боковушке дать отрицательный боковой margin равный или больше ее ширине, то она перестает занимать место по горизонтали вообще. И значит "умещается" сбоку основной колонки. И тем самым поднимается вверх.

#container {
  padding-left:200px;
}
#main {
  float:left; width:100%;
}
#sidebar {
  float:left; width:200px;
  margin-left:-200px;
}

Дальше осталось пододвинуть боковушку на свое место налево. Сейчас относительно своего начального положения (правый край) она сдвинута налево на 200 пикселов, и надо к ним добавить еще все ширину основной колонки — 100%. В CSS есть обходной способ, когда надо сложить несколько смещений в разных единицах: одно сделать через margin, а другое — через смещение при position:relative.

#sidebar {
  float:left; width:200px;
  margin-left:-200px;

  position:relative; left:-100%;
}

Вот теперь все практически на месте. Единственная проблема — баг в IE, который двигает колонку слишком далеко налево. Автор статьи это обходит неким шаманством, расставляя по-другому 200px и 100%, и применяя right вместе с left примерно так:

#sidebar {
  float:left; width:200px;
  margin-left:-100%;
  position:relative; right:200px;
}

* html #sidebar {
  left:0; /* тут ширина правой колонки, если есть */
}

Честь ему и слава, что он до этого дохачил :-). Однако, это все равно работает, только если ширина контейнера занимает все окно. Если меньше, IE куда-то девает левую колонку, и у меня так и не вышло ее найти :-(.