Всем привет, обращаюсь к вам с помощью.
Я почти прошёл испытание, но с Промо Колонками и Футером у меня проблемы.
В промо колонках слишком большой паддинг-топ, я не знаю как сделать по меньше.
С футером проблемы такие, что он находится на уровне колонки Left, даже когда я не ставлю ему класс layout-positioner. Что делать, ведь футер должен быть шириной на всю страницу.
<div class="container">
<div class="header layout-positioner"><p>Header</p></div>
<div class="menu">
<div class="layout-positioner"><p>Menu</p></div>
</div>
<div class="promo layout-positioner clearfix">
<div class="promo-collum">Promo 1</div>
<div class="promo-collum">Promo 2</div>
</div>
</div>
<div class="content layout-positioner clearfix">
<div class="collum"><p>Left</p></div>
<div class="collum"><p>Main</p></div>
<div class="collum"><p>Right</p></div>
</div>
<div class="footer">
<div class="layout-positioner"><p>Footer</p></div>
</div>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.container {
background: #34495e;
box-sizing: border-box;
width: 450px;
height: 170px;
padding-top: 1px;
}
.header {
background: #c0392b;
min-height: 35px;
box-sizing: border-box;
margin-bottom: 10px;
}
.menu {
background: #3498db;
min-height: 35px;
margin-bottom: 10px;
}
.promo-collum {
background: #c0392b;
width: 160px;
margin-right: 10px;
min-height: 50px;
float: left;
padding: 5px;
}
.promo .promo-collum + .promo-collum {
margin-right: 0;
float: right;
}
.content .collum p {
background: #3498db;
width: 60px;
float: left;
margin-right: 10px;
min-height: 100px;
margin-bottom: 1px;
}
.content .collum:nth-child(2) p {
width: 180px;
}
.content .collum:last-child p {
margin-right: 0;
}
.footer {
background: #34495e;
min-height: 35px;
clear: both;
box-sizing: border-box;
width: 450px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
p {
padding: 5px;
}