Трехколоночная резиновая верстка с особенностью

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

Как быть если необходимо, чтобы все три колонки всегда были одинаковой высоты?

Без различных хаков и извращений сделать так достаточно проблематично если мыслить в лоб, но есть другие пути...

Начнем с того, что сначала реализуем более естественный вариант с тремя колонками разной высоты. Наиболее распространенный способ - это, конечно, использование свойства float у трех элементов div. Различных модификаций такого способа безмерно много в сети, причем разъясненных до мелочей.
1. Реализуем простую верстку из трех элементов div, которые потенциально будут нашими колонками. Из моих собственных предпочтений я оберну эти колонки еще в один элемент div, ширина которого для чистоты опыта будет задан в процентах:

<div class="centered">
        <div class="left-content">
            left column
        </div>
        <div class="center-content">
            center column
        </div>
        <div class="right-content">
            right column
        </div>
</div>

Применив к данной структуре структуре следующий css получим вполне стандартный пример:

.centered {
  margin: 0 auto;
  width:75%;
  overflow:hidden;
  font-size: 1.4em;
  padding: 5px;
  background:#000;
}
.centered .left-content {
  float:left;
  width:25%;
  background:#06F;
}
.centered .center-content {
  float:left;
  width:50%;
  background:#FF6;
}
.centered .right-content {
  float:left;
  width:25%;
  background:#F60;
}

В результате получаем всем привычный пример, в котором высота контента колонки некоим образом не отражается на высоте соседних колонок. При равной высоте контента все выглядит замечательно:

А в случае когда высота контента разная(:

А вот теперь приступим к непосредственным экспериментам.
2. Обернем элементы div, являющиеся нашими колонками, в еще один элемент div:

<div class="centered">
    <div class="column">
        <div class="left-content">
            left column
        </div>
        <div class="center-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-content">
            right column
        </div>
    </div>
</div> 

Естественно этот новый элемент примет высоту максимальной колонки, но мы выставим для него значение ширины, равное нашей левой колонки. Из-за этого придется модифицировать значение ширину у элементов: left-content, center-content, right-content:

.centered .column {
  width:25%;
}
.centered .left-content {
  float:left;
  width:100%;
  background:#06F;
}
.centered .center-content {
  float:left;
  width:200%;
  background:#FF6;
}
.centered .right-content {
  float:left;
  width:100%;
  background:#F60;
} 

Можно заметить, что нам удалось сохранить реальную ширину колонок, хотя они утанули одна под другую:

3. Снова обернем всю структуру колонок в еще один div, что приведет к тому, что мы получим уже два элемента растягиваемых структурой колонок:

<div class="centered">
    <div class="column">
      <div class="column2">
        <div class="left-content">
            left column
        </div>
        <div class="center-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right-content">
            right column
        </div>
      </div>
    </div>
</div> 

Также зададим ширину этому промежуточному элементу, равную центральной колонке, и сместим этот элемент вправо - на место центральной колонки. Естественно такое изменение приведет и к изменению значений свойств вложенных элементов:

.centered .column {
  width:25%;
}
.centered .column2 {
  width:200%;
  position:relative;
  left: 100%;
}
.centered .left-content {
  float:left;
  width:50%;
  background:#06F;
}
.centered .center-content {
  float:left;
  width:100%;
  background:#FF6;
}
.centered .right-content {
  float:left;
  width:50%;
  background:#F60;
} 

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

4. Вновь обернем структуру "колонок" (теперь мы знаем, что это не реальные колонки) в еще один элемент div, который будет отображать реальную правую колонку:

<div class="centered">
    <div class="column">
      <div class="column2">
          <div class="column3">
            <div class="left-content">
                left column
            </div>
            <div class="center-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="right-content">
                right column
            </div>
        </div>
      </div>
    </div>
</div> 

Аналогичным образом сместим новый элемент на место правой колонки с соответствующим изменением его ширины, а также всех вложенных элементов:

.centered {
  margin: 0 auto;
  width:75%;
  overflow:hidden;
  padding: 5px;
  font-size:1.4em;
  background:#000;
}
.centered .column {
  width:25%;
}
.centered .column2 {
  width:200%;
  position:relative;
  left: 100%;
}
.centered .column3 {
  width:50%;
  position:relative;
  left: 100%;
}
.centered .left-content {
  float:left;
  width:100%;
  background:#06F;
}
.centered .center-content {
  float:left;
  width:200%;
  background:#FF6;
}
.centered .right-content {
  float:left;
  width:100%;
  background:#F60;
} 

Результатом этих преобразований станет следующая картина:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <title>Exemple</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>  
  </head>
 
  <body>
 
    <div class="centered">
        <div class="left-column">
          <div class="center-column">
              <div class="right-column">
                <div class="left-content">
                    left column
                </div>
                <div class="center-content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <div class="right-content">
                    right column
                </div>
                <div class="clear"></div>
            </div>
          </div>
        </div>
    </div>
 
  </body>
</html>

На этой страничке подключается style.css:

body {
  margin: 0;
}       
.centered {
  margin: 0 auto;
  width:75%;
  padding: 5px;
  font-size:1.4em;
  background:#000;
}
.centered .left-column {
  width:25%;
  background:#06F;
}
.centered .center-column {
  width:200%;
  margin-right:-100%;
  position:relative;
  left: 100%;
  background:#FF6;
}
.centered .right-column {
  width:50%;
  position:relative;
  left: 100%;
  background:#F60;
}
.centered .left-content {
  float:left;
  width:100%;
  margin-right:-100%;
  position:relative;
  left:-300%;
}
.centered .center-content {
  float:left;
  width:200%;
  margin-right:-200%;
  position:relative;
  left:-200%;
}
.centered .right-content {  
}
 
.clear {
  clear:both;
  font-size: 0;
  overflow:hidden;
} 

Вот и все, получаем три колонки одинаковой высоты с резиновой шириной - теперь экспериментируем дальше!)

Автор первоначальной идеи: Сергей Чикуёнок