строим сетку [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="header1">
               Header
           </div>
        </div>
          <div class="menu">
               Menu
          </div>
         <div class="layout-positioner"> 
            <div class="block promo1">
                Promo 1
            </div>
            <div class="block promo2">
                Promo 2
            </div>
         </div>
    </div>
    <div class="layout-positioner">
       <div class="content left">
           Left
       </div>
       <div class="content main">
           Main
       </div>
       <div class="content right">
           Right
       </div>
    </div>
       <div class="footer">
          Footer
       </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;
}

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

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

.header {
width: 450px;
min-height: 160px;
background: #34495e;
padding-top: 10px;
margin-bottom: 10px;
}

.header1 {
width: 340px;
min-height: 25px;
background: #c0392b;
margin-bottom: 10px;
padding: 5px;
}

.menu {
min-height: 25px;
background: #3498DB;
margin-bottom: 10px;
padding: 5px 55px;
}

.block {
float: left;
width: 160px;
min-height: 50px;
background: #c0392b;
padding: 5px;
}

.promo2 {
margin-left: 10px;
}

.content {
float: left;
min-height: 100px;
background: #3498DB;
margin-bottom: 10px;
padding: 5px;
}

.left {
width:60px;
margin-right: 10px;
}

.main {
width: 180px;
margin-right: 10px;
}

.right {
width: 60px;
}

.footer {
padding: 5px 55px;
min-height: 40px;
background: #34495e;
clear: both;
}

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

2

Меню и футер не центрированы. Сегодня эти вопросы уже обсуждались. Почитайте.

3

Потрясающая скорость, Ineska, спасибо.

Пробовал с layout-positioner обертывая содержимое - визуально не влияло. И паддинг слева-справа убрать не удалось.

     <div class="footer">
           <div class="layout-positioner">
             Footer
           </div>
     </div>

.footer {
padding: 5px 55px;
min-height: 40px;
background: #34495e;
clear: both;
}

Если убрать паддинг - содержимое “прилипает” к границе центровки. Непонятен, в данном случае, смысл layout-positioner для текста.

4

Интересно, а как тогда получилось у автора темы 27/32 100% критика в студию ?

5

Дополнтительный блок с классом =“text”:

<div class="footer">
           <div class="layout-positioner">
               <div class="text">
                Footer
               </div>
           </div>
       </div>

и добавлением в CSS:

.text {
padding: 5px;
}

работает.

Насколько я понял, речь идет о более корректной форме позиционирования нежли:

.text {
padding: 5px 55px;
}

к примеру.