27/32 - 100% Оцените, пожалуйста, код

Курсы §15. Сетки
1 
Вот HTML
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="layout-positioner">
        <div class="layout layout-header">
          Header
        </div>
        <div class="layout layout-menu">
          Menu
        </div>
        <div class="promo">
          <div class="layout layout-promo1">
            Promo 1
          </div>
          <div class="layout layout-promo2">
            Promo 2
          </div>
        </div>
      </div>
    </div>
    <div class="features">
      <div class="layout-positioner">
        <div class="layout-column layout-column1">
          Left
        </div>
        <div class="layout-column layout-column2">
          Main
        </div>
        <div class="layout-column layout-column3"> 
          Right
        </div>
      </div>
    </div>
     <div class="layout-footer">
      <div class="layout-positioner">
      	<div class="footer">Footer</div>
      </div>
    </div>
  </body>
</html>

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

    body {
      width: 450px;
      height: 335px;

      font-size: 10px;
      font-family: "Arial", sans-serif;
      color: white;
    }

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

    .header {
      background-color: #34495e;
      margin-bottom: 10px;
      padding-top: 5px;
    }

    .layout-positioner {
      width: 350px;
      margin: 0 auto;
    }
    .layout-positioner::after {
      content: "";
      display: table;
      clear: both;
    }

    .layout {
      margin-bottom: 10px;
      padding-top: 5px;
      padding-left: 5px;
    }
    .layout-header {
      background-color: #c0392b;
      min-height: 30px;
      margin-top: 5px;
    }

    .layout-menu {
      width: 450px;
      margin-left: -50px;
      background-color: #3498db;
      min-height: 35px;
      padding-top: 5px;
      padding-left: 55px;
      box-sizing: border-box;
    }

    .layout-promo1,
    .layout-promo2 {
      background-color: #c0392b;
      width: 165px;
      min-height: 55px;
    }


    .layout-promo1 {
      float: left;
    }

    .layout-promo2 {
      float: right;
    }

    .features {
      margin-bottom: 10px;
    }

    .layout-column {
      background-color: #3498db;
      min-height: 105px;
      margin-right: 10px;
      padding-top: 5px;
      padding-left: 5px;
    }

    .layout-column1 {
      width: 65px;
      float: left;
    }

    .layout-column2 {
      float: left;
      width: 185px;
    }

    .layout-column3 {
      float: right;
      margin-right: 0px;
      width: 65px;
    }

    .footer {
      width: 450px;
      min-height: 45px;
      background-color: #34495e;
      padding-top: 5px;
      padding-left: 55px;
      margin-left: -50px;
      box-sizing: border-box;
    }
2

Этого не должно быть.

3

хорошо) а как тогда меню и футер на всю ширину растянуть?

4

На примере футера посмотрим.

Ваша разметка здесь правильная. Но в css стилизовано неверно. Вы задаете фоновый цвет для .footer, а его ширина (если учесть обертку центровщик) - 350px. Но никто не мешает вам задать фоновый цвет родителю - .layout-footer. Его ширина ничем не ограничена.

2 лайка
5

поняла теперь! спасибо огромное)

7

а для чего нужен div layout-positioner? Во-первых.
и во-вторых зачем везде нужно писать два класса?
В-третьих зачем нужен display: table в layout-positioner?
P.S. Я не понял тему.