Статья 10. Условное строение блоков средней части сайта.

В уроке первом данной серии статей было  рассмотрено строение простейшего макета шаблона сайта.  Я повторюсь:  простейшего макета шаблона сайта.Соответственно расположение блоков может быть произвольным и всё это зависит от мастерства верстающего сайт специалиста.
Проведя небольшой экскурс по сайтам Европы и Америки вы увидите большое кол-во шаблонов  внешний вид которых действительно достоин огромного уважения.  И  я просто уверен , что  у Вас это всё впереди и со временем наши сайты будут выглядеть не хуже, а то и лучше не наших.
  Вот такое предисловие к данной статье, а нам пора возвращаться  к строению простейших макетов шаблонов. В частности к условному строению средней части сайта.  Итак:  наш изготавливаемый макет.

И мне нужно сделать два блока. Это блок боковой панели «sidebar» и блок полезного содержимого «content»

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

А если  высота блоков не фиксирована? А если она изменяется по содержимому блока?  В этом случае  внешний вид  сайта определённо страдает от такого вот вида.

Один из блоков всегда длиннее  другого.  Что по моему мнению не есть красиво.  Можно конечно залить контейнер нужным цветом и использовать в качестве фона блоков фон контейнера, но по моей задумке боковые ( оранжевые) части контейнера должны быть видны.  Именно для этой цели контейнер имеет свой цвет.  Что делать?.  А можно сделать ещё один блок который станет «родительским» блоком для  блоков «sidebar» и «content»

Этот блок будет изменять свою высоту по внутреннему содержимому, а это значит что нижняя  часть среднего блока всегда будет ровненькой и красивенькой. В дальнейшем это даст нам возможность с лёгкостью оформить блок «footer».  Ну а мы  в свою очередь создадим  в  этом блоке нужные нам «sidebar» и «content».

Естественно обводка блоков на данной картинке условна и сделана для  наглядности  строения средней части макета шаблона сайта.  Вновь созданный блок называем произвольно  ( например S-blok) и размещаем в одноимённой папке во вкладке «слои».

Вот пожалуй и всё.  В статье №9 рассматривалось строение блоков боковой панели , а сегодняшняя статья является промежуточной. Это значит что в следующей статье будем заполнять блоками боковую панель макета.  Удачи!  :)