Создавая полноценную web-страницу, все, так или иначе, сталкиваются с проблемой, а какую технику для создания оной выбрать.

Их по сути всего раз-два и обчелся - техника на основе float и абсолютное позиционирование.

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

Решений с использованием абсолютного позиционирования не так уж и много, писал и сам об этом.

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

Об одной из них и поговорим сегодня.

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

Другое дело, абсолютное позиционирование.

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

Отвлекся :)

Итак, решаем проблему одинаковой высоты колонок при абсолютном позиционировании.

С чем будем работать. html-код и стили от макета справой колонкой навигации.

html

<div class="middle">
  <div class="content">Content</div>
  <div class="right">Right</div>
</div>

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

css

* {margin:0;padding:0;}
body {background:#fff;}
.middle {
  background-color:#eee;
  border-right:#cc9 200px solid;
  margin:0 auto;
  position:relative;
  width:400px;
}
.right {
  position:relative;
  right:-400px;
  top:0;
  width:200px;
  z-index:1;
}
.content {
  background-color:#eee;
  border-right:#cc9 200px solid;
  position:absolute;
  left:0;
  top:0;
  width:400px;
}

Стилей тоже совсем чуть-чуть.

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

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

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

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

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

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

Так, что больше креатива, дорогие товарищи, ставим, стараемся и стремимся, решать более глобальные проблемы и задачи.

Но, довольно лирики.

Переходим на страницу, где находятся линки на примеры.

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

Возможно, автор еще не раз вернется к этой теме, сериалы-то никто не отменял :)

В заключении, остается добавить, что проблема footer-а, пока остается не решенной.