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

Это в каком-то роде продолжение темы предыдущего поста, "Верстаем без float", решил сделать стандартную разметку в три колонки – left-content-right. Без нее картина была бы не полной. Да и другое расположение колонок отведенных под навигацию, не помешает, но этот вопрос оказался достаточно сложным и, прочитав статью до конца, вы поймете почему.

Но тут сплошные вопросы без ответов. Суть проблем понятна, но от чувства сожаления трудно избавиться.

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

Что хотим? Скриншот.

Естественно, колонки должны быть равной высоты, не зависимо от их наполнения и по возможности разная фоновая заливка, про background:url(…) repeat-y тут речи нет, у них желательна.

Стартовый html-код и стили.

<div class="middle">
  <div class="content>Center</div>
  <div class="left>Left</div>
  <div class="right">Right</div>
</div>

.middle {
  background-color:#eee;
  border-right:#cc9 100px solid;
  border-left:#dd9 100px solid;
  margin:20px auto;
  position:relative;width:200px;
}
.right {position:relative;top:0;right:-100px;width:100px;}
.left {
  background-color:#dd9;
  position:relative;top:0;left:-100px;
  width:100px;
}
.content {
  background-color:#eee;
  border-right:#cc9 100px solid;
  border-left:#dd9 100px solid;
  position:absolute;left:-100px;top:0;
  width:200px;;
}

Результат плачевный. Скриншот.

Картина одинаковая во всех имеющихся у меня браузерах.

Исправляем.

Еще раз напомню, страничка была открыта в IE7.

Так, как только связкой position:relative и position:absolute; уже не обойтись, а вы можете поэкспериментировать сами, попробуем подключить подзабытый нами float.

float:left; добавлен в .left

Ну, думаю ура, получилось. Но рано радовался :(

Смотрим в альтернативных браузерах.

По сравнению со вторым скриншотм, ничего не изменилось, а жаль.

Или все слишком просто или кто-то явно не прав. И шагает IE7 не в ногу с остальными в гордом одиночестве, а ведь могло бы быть все совершенно иначе.

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

Если продолжить, добавив float:right; для .right, то будет так.

Скриншот IE6.

Центральна часть, исчезла, словно ее корова языком слизала. Но макет работает, почти, как задумано :)

Скриншот OPERA, FF3.

Здесь правая колонка вообще не тянет за собой фон, он заканчивается для нее на уровне центральной :(

Что и говорить, IE7 во всех случаях просто молодец, о чем и поведал вам шуточный заголовок поста.

Возможно, свежий не предвзятый взгляд поможет решить проблему.

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

На тестовой странице все float закомментированы. Желающие испытать свои собственные силы, могут начать с нуля.