[27/32] На оценку. Замечания приветствуются. Интересны ваши варианты.

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="header-row-1 layout-positioner">
                Header
            </div>
            <div class="header-row-2">
                <div class="layout-positioner">
                    Menu
                </div>
            </div>
            <div class="header-row-3 layout-positioner">
                <div class="header-row-3-column">
                    Promo 1
                </div>
                <div class="header-row-3-column">
                    Promo 2
                </div>
            </div>
        </div>
        <div class="content layout-positioner">
            <div class="content-column">
                Left
            </div>
            <div class="content-column">
                Main
            </div>
            <div class="content-column">
                Right
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
                Footer
            </div>
        <div>
    </body>
</html>
1 лайк
2 
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;
    min-height: 35px;
    box-sizing: border-box;
    padding: 5px;
}

.layout-positioner:after {
    display: table;
    content: "";
    clear: both;
}

.header {
    padding: 10px 0;
}
.header,
.header-row-3,
.footer {
    background: #34495e;
}

.header-row-1 {
    background: #c0392b;
}

.header-row-2 {
    background: #3498DB;
    width: auto;
    margin: 10px 0;
}

.header-row-3 {
    padding: 0;
}

.header-row-3-column {
    background: #c0392b;
    min-height: 50px;
    width: 160px;
    padding: 5px;
    float: left;
}

.header-row-3-column:last-child {
    float: right;
}

.content {
    padding: 0;
    margin: 10px auto;
}
.content-column {
    background: #3498DB;
    min-height: 100px;
    width: 60px;
    padding: 5px;
    float:left;
}

.content-column:nth-child(2) {
    width: 180px;
    margin: 0 10px;
}
1 лайк
3

Не закрыт див футера. Гоняйте через валидатор: https://validator.w3.org/.

4

Мне ваш вариант нравится больше, чем мой (кстати, тоже прошу оценить). Но в вашем решении я не понял бордер-бокс-сайзинг и паддинг у позиционера, потому что он будет влиять на дочерние блоки. К слову, нормально отступить сверху от границы окна я не смог. Надеюсь, более опытные ребята нам помогут.

5

В курсе про блочную модель, говорилось о таких случаях - выпадании внешних отступов (margin-ов). Там вроде бы есть несколько способов борьбы с ними. Я запомнил один из вариантов - выкручивался при помощи (padding-ов) :slight_smile:.
З,Ы, да, действительно отсутствует закрывающий тег футера. Спасибо за совет)