Испытание: строим сетку 27/32

Курсы §15. Сетки
1

Посмотрите, пожалуйста, код. Тема далась трудно, буду проходить вновь. Не использовала свойство clearfix (не до конца поняла еще его использование на практике). Есть ощущение что много лишнего не смотря на то что задание выполнено на 100%.

Испытание: строим сетку 
<div class="wrapper">
       <div class="layout-positioner">
             <div class="header">Header</div>
       </div>
        
       <div class="menubox">
            <div class="layout-positioner">
                   <div class="menu">Menu</div> 
             </div>
       </div>
       
            <div class="layout-positioner">
                   <div class="promobox column1">Promo 1</div>
                   <div class="promobox column2">Promo 2</div>
           </div>

   <div class="layout-positioner">
          <div class="content content-left">Left</div>
          <div class="content content-main">Main</div>
          <div class="content content-right">Right</div>
   </div>


   <div class="footerbox">
    <div class="layout-positioner">
               <div class="footer">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;
}

   .wrapper {
   background: #34495e;
   padding-top: 10px;
}

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

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

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

  .menubox {
   background: #3498DB;
   margin-bottom: 10px;
}

  .menu {
   padding: 5px;
   min-height: 25px;
}

  .promobox {
   background: #c0392b;
   width: 160px;
   min-height: 50px;
   padding: 5px; 
   margin-bottom: 10px;
}

  .column1 {
   float: left;
}

  .column2 {
   float: right;
}

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

}

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

 .content-main {
  float: left;
  width: 180px;
}

 .content-right {
  float: right;
  width: 60px;
}

 .footerbox {
  min-height: 40px;
  background: #34495e;
}

 .footer {
  padding: 5px;
}



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

Это и есть clearfix, только название другое. Но смысл один и тот же.
Лишнего в коде я не вижу. Всё правильно сделали.

1 лайк
3

спасибо) буду проходить вновь.