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