В общем вот такой вот нестандартный немного подход при выполнении этого задания естественно не на 100% но у меня просто возникли трудности в освоении сеток так что пришлось что то выдумывать
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class="header-block dark-blue">
<div class="container">
<div class="header red">
Header</div>
<div class="menu blue">
Menu</div>
<div class="promo1 red">
Promo 1</div>
<div class="promo2 red">
Promo 2</div>
</div>
</div>
<div class="container columns ">
<div class="left blue column">Left</div>
<div class="main blue column">Main</div>
<div class="right blue column">Right</div>
</div>
</div>
<div class="footer dark-blue">
<div>Footer</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;
}
.container:after {
display: table;
clear: both;
content: ‘’;
}
.header-block {
height: 160px; padding-top:10px; }
.header {
margin:auto; width: 350px;
padding-bottom:20px; height:15px;}
.menu {
margin:auto; padding:10px; margin:10px 0;
height:15px;
}
.column {
margin-top:10px;
margin-bottom:10px;
float: left;
width: 70px;
min-height: 110px;
}
.left {
margin-left:50px;
margin-right:5px;
}
.main {
width:190px; margin-right:5px; margin-left:5px;
}
.right {
margin-left:5px;
}
.promo1{
width:170px;
margin-left:50px;
height:60px;
float:left;}
.promo2 {
width:170px;
float:right;
margin-right:50px;
height:60px;
}
.dark-blue {
background-color: #34495e}
.footer {
height: 40px;
background-color: #34495e}
.red {
background-color: #c0392b
}
.blue {
background-color:#3498DB
}