27/32 100% Оцените пожалуйста код. Что можно оптимизировать?

Курсы §15. Сетки
1 
<div class="top">
        <div class="layout-positioner">
            <div class="header"> Header </div>
        </div>
        <div class="layout-positioner">
            <div class="menu"> Menu </div>
        </div>    
        <div class="layout-positioner">    
            <div class="promo"> Promo 1 </div>
            <div class="promo"> Promo 2 </div>
        </div>
    </div>

.top {
background-color: #34495e;
}

.layout-positioner {
width: 350px;
margin: 10px auto;
}

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

.header {
background-color: #c0392b;
padding: 5px 5px 15px;   
}

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

.promo {
background-color: #c0392b;
padding: 5px 5px 30px;
float: left;
width: 160px;
margin-right: 10px;
}

.promo:last-child {
margin-right: 0;
}

Подскажите, пожалуйста:

  1. Почему внешние отступы layout-positioner воспринимаются top(-ом)?
  2. Как отцентрировать блок menu, при том что бы его фон растягивался, без сдвига текста? ( ну т.е. у меня получается или фон что бы растягивался, вместе с родительским контейнером top, либо центровать layout-positioner)
  3. Обязательно ли задавать внутренним блокам (header, menu, promo1 и т.д.) ширину и высоты, либо же можно обойтись внутренними отступами?

Alexey_Ivanov, спасибо, вроде бы справился.

Оцените код внизу пожалуйста. Что можно в нем подправить?

2
  1. Явление выпадения маргинов;
  2. Делать доп. блок-обёртку;
  3. Можно обойтись. Но ширину обычно задают - чтобы какое-нибудь длинное предложение не растягивало блок вширь. Высоту - можно отрегулировать отступами. Или задать в виде min-height.
2 лайка
3 
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="top">
        <div class="layout-positioner">
            <div class="header"> Header </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">
                <div class="menu-positioner"> Menu </div>
            </div>    
        </div>
        <div class="layout-positioner">    
            <div class="promo"> Promo 1 </div>
            <div class="promo"> Promo 2 </div>
        </div>
    </div>
    <div class="middle">
        <div class="layout-positioner">
            <div class="side"> Left </div>
            <div class="main"> Main </div>
            <div class="side"> Right </div>
        </div>
    </div>
    
    <div class="bottom">
        <div class="layout-positioner">
            <div class="footer"> Footer </div>
        </div>
    </div>
</body>
1 лайк
4 
.top {
background-color: #34495e;
padding: 10px 0;
}

.layout-positioner {
width: 350px;
margin: 0 auto;
}

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

.header {
background-color: #c0392b;
min-height: 25px;
padding: 5px;
margin-bottom: 10px;
}

.menu {
background-color: #3498DB;
min-height: 35px;
margin-bottom: 10px;
}

.menu-positioner {
padding: 5px;   
}

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

.promo:last-child {
margin-right: 0;
}

.middle {
padding: 10px 0;   
}

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

.side:last-child {
margin-right: 0;
}

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

.bottom {
background-color: #34495e;
min-height: 35px;
}

.footer {
padding: 5px;
}
1 лайк
5

Да, теперь значительно лучше. Если хотите, можете погруппировать селекторы с одинаковыми свойствами. Но не обязательно.

1 лайк