Сетки / Испытание: строим сетку [27/32] Нужна критика(2)

Курсы §15. Сетки
1

Задание выполнено на 100% , но сомнения в качестве кода. Укажите, пожалуйста, на слабые места и посоветуйте в каком направлении двигаться, что бы его улучшить . Спасибо

Испытание: строим сетку 
    <div class="conteiner1">
    <div class="header">Header</div>
    <div class="menu">Menu</div>

    <div class="promo">
    <div class="promo1">Promo 1</div>
    <div class="promo2">Promo 2</div>
    </div>

    </div>
    <div class="conteiner2">
    <div class="left-column">Left</div>
    <div class="center-column">Main</div>
    <div class="right-column">Right</div>
    </div>
    <div class="conteiner3">
    <div class="footer">Footer</div>
    </div>
</body>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.conteiner1 {

width: 450px;
height: 160px;
background-color: #34495e;
padding-top: 10px;
}
.header {
width: 345px;
height: 30px;
background-color: #c0392b;
margin-left: 50px;
padding-top:5px;
padding-left: 5px;
}

.menu {
height: 30px;
background-color: #3498DB;
margin-top: 10px;
padding-left: 55px;
padding-top: 5px;
}
.promo {
margin-top: 10px;
}

.promo1 {
background-color: #c0392b;
width: 160px;
height:50px;
float:left;
margin-left: 50px;
padding: 5px;
}

.promo2 {
background-color: #c0392b;
width: 160px;
height:50px;
float:left;
margin-left: 10px;
padding:5px;
}
.conteiner2 {
width: 450px;
padding-top: 10px;
padding-bottom: 10px;

}

.left-column {
height: 100px;
width: 60px;
background-color: #3498DB;
margin-left: 50px;
padding: 5px;
float:left;
}
.center-column {
background-color: #3498DB;
width:180px;
height: 100px;
float:left;
padding: 5px;
margin-left: 10px;

}
.right-column {
background-color:#3498DB;
float:left;
width: 60px;
height: 100px;
padding:5px;
margin-left: 10px;
}

.conteiner3 {
padding-top: 10px;
clear:both;
}

.footer {

background-color:#34495e;

padding-left: 55px;
padding-top:5px;
height:30px;

}

2

Плохо, конечно, что такой вариант оценивается в 100%. Система смотрит только визуальное соответствие.
Сетка у вас не получилась.
Из недостатков - отсутствие распорок и центровщика .layout-positioner, из ошибок - фиксированные высоты у блоков.
Почитайте темы на форуме по этому заданию.

3

понял…исправлю

4

переделал . что скажете?

`

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
`

`html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.layout-positioner {
width: 350px;
margin: auto;

}

.layout-positioner:: after{
display:table;
content:"";
clear:both;
}
.layout-positioner .header {
padding: 5px;
}
.conteiner1 {
background-color:#34495e;
padding: 10px 0px;
}
.conteiner2, .conteiner3 {
margin-top: 10px;
}
.conteiner3 {
background-color:#34495e;

}

.cont-menu {
background-color:#3498DB;
margin: 10px 0px;
}
.header {
background-color:#c0392b;
min-height: 25px;
}
.menu , .footer{
padding: 5px;
min-height: 25px;
}

.promo2 {
margin-left: 10px;}

.promo1, .promo2 {
background-color:#c0392b;
float:left;
width:160px;
min-height: 50px;
padding: 5px;
}

.clearfix {
height: 0px;
clear:both;
}
.left-column, .right-column {
background-color:#3498DB;
float:left;
width: 60px;
min-height: 100px;
padding: 5px;
}
.center-column {
background-color:#3498DB;
float:left;
width: 180px;
margin: 0px 10px 0px 10px;
min-height: 100px;
padding: 5px;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/`

5

Расскажете, зачем вам две распорки?

6

без clearfix выпадают блоки promo и колонки во втором контейнере

7

без .layout-positioner:: after{ display:table; content:""; clear:both; } работает распорка, а вот без clearfix нет. получается , что .layout-positioner:: after действительно лишний. но в идеале он же должен работать, не пойму где ошибка

8

Здесь ошибка, перед after пробел нельзя ставить.

9

благодарю)