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

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

Добрый день уважаемые форумчане!

Хотелось бы попросить вас ознакомится с моим вариантом решения задачки и ,по возможности, указать на те куски кода, где можно что-то исправить/дополнить.

P.S. Мне кажется, что я сделал все не так как нужно.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="page-header clearfix ">
       
            <div class="header">Header</div>
        
                <div class="menu">Menu</div>
        
                   <div class="promo-list clearfix" >
        
                      <div class="promo1 promo">Promo 1</div>
        
                         <div class="promo2 promo">Promo 2</div>
     
                    </div>
       
            </div> 
       
        <div class="features clearfix ">
        
        <div class="layout-column-1 column-side">Left</div>
          <div class="layout-column-2">Main</div>
            <div class="layout-column-3 column-side">Right</div>
        
        </div>
       
       <div class="footer">
        Footer
   </div class="footer">
    </body>
</html>

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

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

.page-header{
background-color:#34495e;
min-height:155px;
padding-top:10px;

 }

.header{
width: 75%;
min-height: 25px;
padding:5px;
margin:auto;
background-color: #c0392b
    }

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

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

.promo-list{

margin:10px 50px;
    }

.promo1{
float:left;
    }

.promo2{
float:right;
    }

.clearfix::after {
    display: table;
    content: "";
    clear: both;
}

.features{
margin: 10px 50px;



    }

.column-side{
min-height: 100px;
width: 60px;
padding:5px;

}

.layout-column-1{
float:left;
background-color:#3498DB;


    }

.layout-column-2{
margin-left:10px;

float:left;
padding:5px;
min-height: 100px;
width: 180px;
background-color:#3498DB;

}
    
.layout-column-3{
float:right;
background-color:#3498DB;

}

.footer{
margin-top:10px;
min-height:35px;
background-color:#34495e;
padding-top:5px;
padding-left: 55px;
    }


    

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

Что-то не так, да?
Центровщик содержимого отсутствует к вашем коде. Поэтому много повторяющихся строк с внешними отступами.

3

Вспомнил в одном из прошлых уроков упоминался селектор box-sizing c функцией border-box и решил попробовать использовать его в прохождении задания.

Оказалось, что это действительно удобное решение padding’ов и рамок.

Можно ли использовать данный селектор и не будет ли ругаться валидатор?

   <div class="header">

	     <div class="layout-positioner clearfix">
         
		     <div class="block head">header</div>
		 
	             </div>

             <div class="block menu">menu</div>

                 <div class="layout-positioner clearfix">
				
				         <div class="block promo1">promo1</div>

			                 <div class="block promo2">promo2</div>

					             </div>
					 
			             </div>
     
         <div class="content">
	 
	         <div class="layout-positioner clearfix">
	 
	         <div class="block left"></div>
	 
	             <div class="block main"></div>
	 
	                 <div class="block right"></div>
	 
	             </div>
	     
		         </div>

                     <div class="footer">

                         <div class="layout-positioner clearfix">

                             <div class="block main-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;
	margin:auto;
}

.clearfix::after{ 
content:"";
display:table;
clear:both;}

.block{ 
box-sizing: border-box;
margin-bottom:10px;
padding:5px;
}

.header,
.footer{  
background-color:#34495e;
}

.head,
.promo1,
.promo2{ 
background-color:#c0392b;
}

.menu{ 
padding-left:55px;
height:35px;
background-color:#3498DB;
}

.head{
height:35px;
margin-top:10px; 
}

.promo1,
.promo2{
 width:170px;
 height:60px;
 float:left;
}

.promo1{
margin-right:10px;
}

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

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

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

.right{
width:70px;
}

.left,
.main,
.right{
margin-top:10px;
float:left;
background-color:#3498DB;
min-height:110px;
}

.footer{
height:35px;
}