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="header-content">Header</div>
            </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">
                <div class="menu-content">Menu</div>
            </div>
        </div>
        <div class="promo">
            <div class="layout-positioner">
                <div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div>
            </div>
        </div>
        <div class="content-columns">
            <div class="layout-positioner">
                <div class="column column-left">Left</div>
                <div class="column column-main">Main</div>
                <div class="column column-right">Right</div>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
                <div class="footer-content">Footer</div>
            </div>
        </div>
    </body>
</html>

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

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

.header, .promo, .footer {
    background-color: #34495e;
}

.layout-positioner {
    padding: 10px 50px;
}

.header-content {
    width: 340px;
    height: 25px;
    background-color: #c0392b;
    padding: 5px;
}
.menu {
    background-color: #3498DB;
}

.menu .layout-positioner {
    padding-top: 0;
}

.menu-content {
    background-color: #3498DB;
    height: 15px;
    padding: 5px;
}

.promo {
    height: 80px;
}

.promo1, .promo2 {
    width: 165px;
    height: 55px;
    background-color: #c0392b;
    padding-top: 5px;
    padding-left: 5px;
    float: left;
}

.promo .promo1 {
    margin-right: 10px;
}

.content-columns {
    background-color: #fff;
    height: 130px;
}

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

.column-main {
    width: 185px;
}

.column-right {
    margin-right: 0;
}

.footer .layout-positioner {
    padding-top: 0;
}

.footer-content {
    background-color: #34495e;
    height: 15px;
    padding: 5px;
}
2

Это не универсальный вариант. В прошлом вашем коде был другой центровщик. Тот лучше.
Фиксированные высоты лучше заменить на min-height.

1 лайк
3

Что не универсальный вариант? padding 10px 50px для .layout-positioner? если указать просто padding: 10px;? Для того, чтобы получить вертикальные отступы для блоков.

4

У автора темы в предыдущем коде для центровщика были отступы auto справа и слева.