Нет, беспросветна эта тьма,
   Сбежали из шестой палаты...
   И сводят дружно WEB с ума,
   Маржины, падинги, флоаты.
   Зверинец браузеров - психов,
   По сути дела, та же масть...
   Ох, не будите братцы лихо,
   Легко в том омуте пропасть ;)
Gordi

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

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

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

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

Посмотрим пару скриншотов:

Первый из коллекции прошлых статей покрасивше будет, но как уже говорил, здесь все колонки с фиксированной шириной, линки на обновленные примеры в конце статьи.

Второй, тема сегодняшнего поста.

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

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

Кратко, о том, в чем же смысл предлагаемого.

  <div id="right">
    <div id="left">
      <div id="content">
        <div class="content">Content</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
      </div>
    </div>
  </div>

Вложенные друг в друга контейнеры с идентификаторами позиционируются соответствующим образом при помощи float и задают цвет нашим колонкам.

В контейнерах с классами, находится информация и блоки с ней с помощью float и относительного позиционирования размещаются там, где необходимо.

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

Ссылки на примеры чуть ниже, но без разночтений при просмотре в различных браузерах, не обошлось.

При использовании данной техники придания иллюзии равной высоты колонкам макета, лучше всех ведут себя, вы будете удивлены – IE6(7).

Все пять вариантов работают в них отлично, как хорошие швейцарские часы.

В группу риска, как всегда попала "северная ведьма", иначе "норвежская красавица" :)

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

Примеры по скриншоту номер один:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right

Примеры по скриншоту номер два:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right

Рунет умрет от плагиата,
От доморощенных "Гуру"…
И хочется ругаться матом,
Не с перепоя по утру…
Но сколько в грудь себя не бей,
В комментах не точи елей,
Куда ни кинь, везде одно -
Сплошное жуткое Г…
Gordi

Печально все.

Что только народ не делает, наизнанку готов вывернуться, лишь бы заявить о себе, "темку" застолбить.

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

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

Даже хотя бы ревизию грамотную сделать того, о чем же там пишут не в состоянии, примеры заточить, да до ума довести, нет такого, что как не крути, прискорбно…

Причем очень часто выдают не которые вещи, что опубликованы давно, за свои, не больше не меньше.

Графоманы и плагиаторы погубят Рунет.

Но не даром говорят: "Не бери в голову, бери в грудь, шире будет..."

Вернемся к теме затронутой в предыдущем посте "Бомба…" и на основе классического трех колоночного макета рассмотрим не которые нюансы.

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

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

html-код при переходе от одного макета к другом практически не меняется.

* {margin:0;padding:0;}
.middle {
  border:#000 1px solid;margin:5px auto;
  padding:3px 5px;width:960px;
}
#left {
  background:#f7f8f9;border:#a00 1px solid;margin-left:-2px;
}
#content,#right {margin:-1px 0;position:relative;}
#content {background:#fff;border:#00a 1px solid;left:205px;}
#right {background:#eee;border:#080 1px solid;left:555px;}
#left,#right,.left,.right {width:200px;}
#content,.content {width:550px;}
.content,.left,.right {float:left;overflow-x:hidden;}
.content {margin-left:-555px;}
.left {margin-left:-761px;}
.right {margin-right:-200px;}
/* Start hack Section */
/* hack for OPERA, FF, Coogle Chrome, IE8 */
#right:after {content:'';clear:both;display:block;}
/* hack for IE6 */
*html #left {overflow-x:hidden;}
*html .content,*html .left,*html .right {position:relative;}
/* End hack Section */

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

Ее размер можно и подсократить, если вам не требуется причиндалы типа - разноцветных border’ов, к примеру, будут все они одного цвета, тоже можно сказать и background-color.

К сожалению, подобного рода, изыски имеют и обратную сторону медали - все колонки фиксированной ширины.

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

Но при известном желании и если вы не побоитесь использовать стилевые хаки, то карты вам в руки.

Контейнер с классом middle центрирует макет относительно вертикальных границ окна браузера, также этому способствует и наличие левого отрицательного отступа для #left. Это позволяет достаточно просто выставить страницу точно по центру, в дальнейшем border можно исключить.

В блок middle, чтобы не плодить лишние стили, можно вложить header и footer.

Сто процентная высота страницы с включением header и footer, по понятным причинам не возможна.

Других особенностей стили не имеют.

Примеры трех колоночные: left-content-right, content-left-right, left-right-content

    Чудес на свете не бывает?
    За них приходиться платить?    
    Один, без "башенно" верстает,
    Другому, в пору все чинить :)      
Gordi

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

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

margin-bottom:-32767px;padding-bottom:32767px;

при минимуме html-кода:

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

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

Собственно, о нюансах подобного рода разметки писал не однократно.

Давайте еще раз остановимся на принципиальных моментах, которые являются сдерживающим фактором повсеместного использования оной на практике.

1. Не удачное сочетание стилей, не относящихся собственно к глобальной разметке макета, в частности не оправданное применение, вроде бы безобидного position:relative, может привести к возникновению бесконечной вертикальной прокрутке страницы. В этом примере position:relative; для простоты иллюстрации, добавлен трем центральным колонкам.
2. Проблема нижнего border’a нашла свое решение, но это потребовало дополнительной разметки, что конечно можно обыграть и в свою пользу, используя ее в качестве псевдо footer’a, но все эти подпорки довольно сильно портят впечатление, нет настоящего фен-шуя.
3. Метки-якоря. Если б вы знали, сколько приходит писем от тех, кто не внимательно читает, с просьбами и даже требованиями срочно решить проблему корректного их поведения в предлагаемой и пропагандируемой мной разметке.
   Увы, все мои попытки, предпринятые в этом направлении, пока не увенчались успехом.
   Тот же пример в полной мере отражающий данную проблему.

Итак.

Можно ли получить макет, имеющий полную иллюзию равной высоты колонок с индивидуальной фоновой заливкой и своими, разного цвета border’ом вокруг каждой колонки?

Скриншот:

И вся эта радость без описанных выше минусов.

Ответ однозначный - да!

Но, как всегда, что-то приобретая, мы что-то неизбежно теряем...

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

Про сто процентную высоту макета разговора нет, тут ее ни при каких обстоятельствах не получить, увы...

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

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

Поэтому не привожу html структуру и стили тестовых страниц, также, как и не поясняю те или иные нюансы, все не однократно будет меняться в процессе доводки до ума.

Вот такая "бомба" :)

Смотрим – left-content и content-right.