html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header {
width:450px;
height:170px;
background-color:#34495e;
}
.footeer {
padding:5px 55px 0 55px;
background-color:#34495e;
float:bottom;
width:340px;
height:40px;
}
.content-Left, .content-Main, .content-Right {
background-color:#3498DB;
padding:5px;
}
.content-Left {
float:left;
width:60px;
height:100px;
margin: 10px;
}
.content-Main {
float:left;
width:180px;
height:100px;
margin:10px 0;
}
.content-Right {
float:left;
width:60px;
height:100px;
margin: 10px;
}
.Header-box {
padding:5px;
background-color:#c0392b;
width:340px;
height:25px;
margin-top:10px;
margin-bottom:10px;
}
.Menu {
padding:5px 55px 0 55px;
clear:both;
width:340px;
height:30px;
background-color:#3498DB;
margin-bottom:10px;
}
.Promo1 {
padding:5px;
float:left;
background-color:#c0392b;
width:160px;
height:50px;
}
.Promo2 {
padding:5px;
float:right;
background-color:#c0392b;
width:160px;
height:50px;
margin-right:50px;
}
.clearfix::after {
content:"";
display:table;
clear:both;
}
.Header-box, .Promo1, .content-Left {
margin-left:50px;
}
Наверно, наворотил громоздко очень. Вышел на 100%, но не доволен.