Просьба дать комментарии по коду.
Хоть строк кода получилось не так много, все же думаю есть моменты, которые можно описать более надежно.
<body>
<div class='header'>
<div class="layout-positioner">
<div class='red header-lay'>Header </div>
</div>
</div>
<div class='blue Menu'>
<div class="layout-positioner">
<div class='Menu-lay'>Menu</div>
</div>
</div>
<div class='promo'>
<div class="layout-positioner">
<div class='red promo1'> Promo 1</div>
<div class='red promo2'> Promo 2</div>
</div>
</div>
<div class='main'>
<div class="layout-positioner">
<div class='blue main-lay'> Left</div>
<div class='blue main-lay main1'> Main</div>
<div class='blue main-lay'> Right</div>
</div>
</div>
<div class='footer'>
<div class="layout-positioner">
<div class='footer-lay'>Footer</div>
</div>
</div>
</body>
html,
body {margin: 0;
padding: 0;
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;}
.layout-positioner
{width: 350px;
margin:0px auto;
padding:0px;}
.layout-positioner::after
{display: table;
content: “”;
clear: both;}
.header,.promo,.footer
{background-color:#34495e;}
.blue
{background-color:#3498DB;}
.red
{background-color:#c0392b;}
.header,.promo
{padding:10px;}
.header-lay
{height: 25px;
padding:5px;}
.Menu-lay,.footer-lay
{height: 25px;
padding:5px;}
.promo1 {float:left;}
.promo2 {float:right;}
.promo1,.promo2
{height: 50px;
width:160px;
padding:5px;}
.main-lay
{float:left;
height: 100px;
width: 60px;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
padding:5px;}
.blue:last-child{ margin-right:0px;}
.main1 {width: 180px;}