Сетки / Простейшая сетка, финал [19/32]
×
Курс «Сетки»

Простейшая сетка, финал [19/32]

Поздравляем! Вы победили выпадание. Теперь завершим сетку.

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

После этого сетка будет завершена. Кстати, мы получили ещё один интересный результат. Мы не зафлоатили блок контента, поэтому он тянется на всю ширину родительского контейнера. А фиксированный маргин слева предохраняет его от заползания под сайдбар.

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Простейшая сетка, финал</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="header">Хедер</div> <div class="content-container clearfix"> <div class="sidebar"> <p>Для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat'им.</p> </div> <div class="content"> <p>У этого способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок "sidebar" идет до блока "content" с основным содержимым. Не нужно думать, что так сделано случайно. Так сделано специально, потому что иначе этот самый способ с наложением колонки поверх margin'а не работал бы.</p> </div> </div> <div class="footer">Футер</div> </div> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; } .wrapper { width: 450px; margin: 0 auto; box-shadow: 0 0 2px #cccccc; } .header, .footer { padding: 10px; background: #ecf0f1; } .sidebar { float: left; width: 150px; min-height: 150px; padding: 10px; color: white; background: rgba(46, 204, 113, 0.8); } .content { min-height: 100px; padding: 10px; color: white; background: #3498db; } .clearfix::after { display: table; content: ""; clear: both;; }
HTML Academy
  1. Задайте для .content маргин слева 170px.
  2. Измените ширину .wrapper на 350px,
  3. а затем на 550px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.