Создание боковой панели сайта: урок с HTML кодом

Этот урок посвящен созданию боковой панели для сайта. Панель будет расположена справа и содержать баннеры.

Создание основного блока

Создадим основной блок (div с id="col"), который будет содержать баннеры и другие элементы. Внутри него расположим блоки с классами left-col (левая колонка) и right-col (правая колонка). Для блока #col установим свойство float: left;.

<div id="col">
  <div class="left-col"></div>
  <div class="right-col"></div>
</div>

Настройка ширины колонок

Установим ширину левой колонки в 10%, правой — в 80%. Блок left-col будет иметь ширину 10%, а right-col займет оставшееся пространство. Для блока #col зададим ширину 70% и отступ справа 10%, что в сумме составит 80% ширины.

#col {
  width: 70%;
  margin-right: 10%;
}

.left-col {
  width: 10%;
  float: left;
}

.right-col {
  width: 80%;
  float: left;
}

Добавление контента

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

<div class="left-col">
  <p style="background-color: red;">Текст</p>
  <p style="background-color: green;">Текст</p>
</div>
<div class="right-col">
  <p style="background-color: blue;">Текст</p>
</div>

Добавление баннеров

Создадим блоки для баннеров:

<div class="right-col">
  <div class="banner">Баннер 1</div>
  <div class="banner">Баннер 2</div>
</div>

Добавим стили для баннеров:

.banner {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

Стили для изображений

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

img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic; /* Для Internet Explorer 8 и ниже */
}

Добавление и настройка баннеров

Добавим изображения в качестве баннеров. Обратите внимание на возможную необходимость обработки GIF-анимации. Добавим отступы к баннерам:

.banner {
    padding: 2px;
    box-sizing: border-box; /* Учитываем padding в ширине блока */
}

Боковая панель создана. Результат соответствует поставленной задаче.