Помогите разобраться. Испытание: строим сетку [27/32]

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

Оказывается, всё сложнее, чем показалось на первый взгляд. Это наверное из-за того, что я вижу в этом задании просто таблицу с блоками, которые просто нужно поставить правильно по местам. А Вы смотрите на это, зная, что дальше это будет все заполняться и что вылезут бока. Очень тяжело понять зачем нужны распорки или центровщики читая только теорию и не видя это на практике. Спасибо вам большое, благодаря Вашей помощи я начинаю копаться глубже. Ведь проходя задание и видя, что там 100% , ты думаешь, что всё ок и идешь дальше. А оказывается нет(((. Еще раз спасибо и мой уже 4 - 100% вариант)))

  <div class="head">
          <div class="header">Header</div>
          <div class="menu">Menu</div>
      <div class="centrovshik">
          <div class="promo promo1">Promo 1</div>
          <div class="promo promo2" >Promo 2</div>
      </div>
 </div>
 <div class="stolbikiLMR">
        <div class="centrovshik">
            <div class="stolb left">Left</div>
            <div class="stolb main">Main</div>
            <div class="stolb right">Right</div>
        </div>
 </div>
 <div class="foot">
        <div class="centrovshik">
            <div class="footer">Footer</div>
        </div>
 </div>

и код:

html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

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

.centrovshik::after {
display: table;
content: “”;
clear: both; }

.head {
width: 100%;
padding-top:10px;
padding-bottom:10px;
color: white;
background: #34495e; }

.header {
width: 340px;
min-height:25px;
margin-left: auto;
margin-right: auto;
padding:5px;
background: #c0392b;}

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

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

.promo1 {float: left;}
.promo2 {float: right;}

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

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

.foot{
min-height: 40px;
color: white;
background: #34495e; }

.footer{padding:5px;}

Кстати, рамка очень помогла, Без нее я бы не справилась)

1 лайк