Простейшая сетка, шаг 2 [18/32]
Мы зафлоатили сайдбар, и он вывалился из контейнера и залез на футер. Исправим это с помощью псевдораспорки.
Вам нужно будет добавить контейнеру колонок класс clearfix. А после этого добавить несколько свойств в CSS-правило для псевдораспорки.
block-18-32.html
Задание
Добавьте элементу с классом content-container класс clearfix.
Добавьте CSS-правилу .clearfix::after свойство content со значением "".
Туда же добавьте свойство display со значением table
и свойство clear со значением both.
Простейшая сетка, финал [19/32]
Поздравляем! Вы победили выпадание. Теперь завершим сетку.
В почти готовую сетку мы добавили немного текста, чтобы посмотреть как она будет себя вести с наполнением. Сейчас видно, что синий блок контента частично залезает под сайдбар. Чтобы избавиться от этого эффекта, можно задать блоку контента маргин слева.
После этого сетка будет завершена. Кстати, мы получили ещё один интересный результат. Мы не зафлоатили блок контента, поэтому он тянется на всю ширину родительского контейнера. А фиксированный маргин слева предохраняет его от заползания под сайдбар.
Таким образом, у нас получилась сетка из двух колонок, одна из которых фиксированная, а вторая тянется. Здесь важно следующее — сайдбар в HTML коде должен располагаться до блока контента, иначе такого эффекта не получится.
block-19-32.html
Сетка посложнее, шаг 1 [20/32]
Теперь построим более сложную сетку. В конце у нас получится вот такой результат:
Да, мы повторяем раскладку главной страницы HTML Academy: двухколончатый хедер и контент в три колонки. На этом шаге создадим сетку хедера. Пока что работаем без содержания.
block-20-32.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Сетка посложнее, шаг 1</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css">
<style>
body {
margin:
0;
padding: 0;
font-family: "PT Sans", sans-serif;
}
.wrapper {
width: 430px;
margin: 0 auto;
box-shadow: 0 0 2px #cccccc;
}
.clearfix::after {
display: table;
content: "";
clear: both;
}
.header {
margin-bottom: 10px;
color: white;
background: #34495e;
}
.header .layout-column {
min-height: 50px;
background: rgba(192, 57, 43, 0.9);
border-bottom: 2px dashed #95a5a6;
}
.header .layout-column-1 {
float: left;
width:280px;
}
.header .layout-column-2 {
float: right;
width:130px;
}
.features {
margin-bottom: 10px;
}
.features .layout-column {
min-height: 100px;
background: rgba(236, 240, 241, 0.9);
border-bottom: 2px dashed #95a5a6;
}
.footer {
min-height: 50px;
color: white;
background: #34495e;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header clearfix">
<div class="layout-column layout-column-1">
Лого
</div>
<div class="layout-column layout-column-2">
Меню
</div>
</div>
<div class="features">
<div class="layout-column">
Колонка 1
</div>
<div class="layout-column">
Колонка 2
</div>
<div class="layout-column">
Колонка 3
</div>
</div>
<div class="footer">
Футер
</div>
</div>
</body>
</html>