Сетки / Испытание: строим сетку [27/32] Прошу критики!

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="Header">
            <div class="layout-positioner">
                <div class="content-header"> Header </div>
            </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">
                <div class="content-menu"> Menu
                </div>
            </div>
        </div>
        <div class="Header">
            <div class="layout-positioner"> 
                <div class="layout-column layout-column-1"> Promo 1
                </div>
                <div class="layout-column layout-column-2">Promo 2
                </div>
            </div>
        </div>
        <div class="features"> 
            <div class="layout-positioner">
                <div class="features-column features-column-1">Left
                </div>
                <div class="features-column features-column-2">Main
                </div>
                <div class="features-column features-column-3">Right
                </div>
            </div>
        </div>
        <div class="footer"> 
            <div class="layout-positioner">
                <div class="footer-content">Footer
                </div>
            </div>
            </div>
        </div>
    </body>
</html>

CSS:
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: 0 auto;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.Header {
padding-top: 10px;
min-height: 45px;
background-color: #34495e;
}
.content-header {
padding-left: 5px;
padding-top: 5px;
height: 30px;
background:#c0392b;
}
.menu {
background:#3498DB;
}
.content-menu {
padding-left: 5px;
padding-top: 5px;
height: 30px;
}
.layout-column {
padding-left: 5px;
padding-top: 5px;
background: #c0392b;
height: 55px;
width:165px;
margin-bottom: 10px;
}
.layout-column-1 {
float:left;
}
.layout-column-2 {
float:right;
}
.features-column {
float:left;
margin-right:10px;
margin-top: 10px;
background:#3498DB;
height: 105px;
width:65px;
padding-left: 5px;
padding-top: 5px;
}

.features-column-2 {
width: 185px;
}
.features-column-3 {
margin-right: 0;
}
.footer {
margin-top: 10px;
background-color: #34495e;
height: 45px;
}
.footer-content {
padding-left: 5px;
padding-top: 5px;
}

2

Почему в коде два header? Немножко нелогично.
Все высоты замените на min-height.
В блоке с тремя колонками второй класс может быть просто column-, так короче.

3

спасибо за ответ! два хедера, потому что мне показалось, что это как-будто один блок, если не один, то по крайне мере с похожими параметрами,значит мне просто у второго хедера поменять название класса? а почему именно нужно минимальную высоту прописывать, а не просто высоту?

4

Поменяйте класс. Минимальная высота прописывается, чтобы сетка растягивалась по высоте, когда её заполняют контентом.

5

благодарю!