- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Другой поток, финал</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
Наш поток:
<div class="header block">.header</div>
<div class="column1 block">.column1</div>
<div class="column2 block">.column2</div>
<div class="column3 block">.column3</div>
<div class="footer block">.footer</div>
</div>
<div class="container">
Что строим:
<img src="final-flow-2.png" alt="Результат">
</div>
</body>
</html>
CSS
.container {
width: 300px;
margin: 10px auto;
}
.block {
margin-bottom: 10px;
padding: 10px;
color: #cc0000;
background-color: rgba(255, 234, 171, 0.5);
border: 2px dashed #cccccc;
}
.column1 {
float: left;
width: 65px;
min-height: 50px;
margin-right: 9px;
}
.column2 {
float: left;
width: 80px;
min-height: 50px;
}
.column3 {
float: right;
width: 65px;
min-height: 50px;
}
.footer {
}
ЗадачиВыполнено
Финальный и самый сложный шаг.
- Для блока
.footerзадайте свойствоclearсо значениемboth.