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

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

Здравствуйте, подскажите пожалуйста на сколько верен мой код:

      <div class="top">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="promo1"> Promo 1</div>
      <div class="promo2">Promo 2</div>
        </div>
        <div class="middle">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
        </div>
      <div class="footer">Footer</div>
      
</body>

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.top{

width: 450px;
height: 150px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #34495e;

}

.footer{
height:35px;
background-color:#34495e;
}
.header{
width: 340px;
height: 25px;
margin-bottom: 10px;
margin-left: 50px;
padding: 5px;
background-color: #c0392b;
}
.menu{
width: 395x;
height: 25px;
padding:5px;
padding-left: 55px;
background-color:#3498DB;

}
.promo1{
width: 160px;
height:50px;
margin-top: 10px;
margin-left: 50px;
margin-right: 5px;
padding:5px;
float:left;
background-color: #c0392b;
}
.promo2{
width: 160px;
height:50px;
margin-top: 10px;
margin-left: 5px;
margin-right:50px;
float:right;
padding:5px;
background-color: #c0392b;
}
.left{
width: 60px;
height: 100px;
margin-top: 10px;
margin-left: 50px;
margin-bottom: 10px;
padding: 5px;
float: left;
background-color: #3498DB;
}
.main{
width:180px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
float: left;
background-color: #3498DB;

}
.right{
width: 60px;
height: 100px;
margin-top: 10px;
margin-left: 10px;
margin-right: 50px;
margin-bottom: 10px;
padding: 5px;
float: right;
background-color: #3498DB;
}
.footer{
margin-top: 10px;
padding-top: 5px;
padding-left:55px;
clear: both;

}

2

Дает 100% при проверки, но нет уверенности в его “красоте”!

3

О красоте, к сожалению, говорить не приходится.
Почитайте несколько тем по этому заданию. Может захотите что-то переделать.
[27/32] 100%. Прошу посмотреть код и указать на минусы и их последствия при верстке.
Прошу советов по грамотному написанию кода
[27/32] Прошу указать на недостатки верстки

4

Спасибо, буду стараться

5

Переписал код, все сходится кроме “хидера”- за рамки выдазит. Посмотрите пожалуйста

          <div class="top">
        <div class="header layout-positioner">Header</div>
        <div class="menu ">Menu</div>
          <div class= "col layout-positioner">
        <div class="col1 promo1 "> Promo 1</div>
        <div class="col1 promo2 ">Promo 2</div>
          </div> 
          </div>
          <div class="middle layout-positioner">
        <div class="left ">Left</div>
        <div class="main ">Main</div>
        <div class="right ">Right</div>
           </div>
        <div class="coll3">
        <div class="footer layout-positioner">Footer</div>
        </div>

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: auto;
}

.layout-positioner:after {
content: “”;
clear: both;
display: block;
}
.top{
background: #34495e;
padding-top: 10px ;
}
.header{
background-color: #c0392b;
min-height: 25px;
padding: 5px;

}
.menu{
background-color: #3498DB;
min-height: 25px;
margin: 10px 0;
padding: 5px;
padding-left: 55px;
}
.promo1{
background-color: #c0392b;
float: left;
}
.promo2{
background-color: #c0392b;
float: right;
}
.col1{
padding: 5px;
width: 160px;
min-height: 50px;
margin-bottom: 10px;
}
.middle{

margin-top: 10px;
margin-bottom: 10px;

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

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