<body>
<div class="wrapper1 clearfix">
<div class="head">Header</div>
<div class="menu">Menu</div>
<div class="promo1">Promo 1</div>
<div class="promo2">Promo 2</div>
</div>
<div class="wrapper2 clearfix">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
<div class="wrapper3 clearfix">
<div class="footer">Footer</div>
</div>
</body>
CSS
html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/
.clearfix:after{
content:’’;
clear:both;
display:table;
}
.wrapper1{
width:450px;
min-height:170px;
background:#34495e;
margin-bottom:10px;
padding-top:10px;
}
.head{
height:25px;
margin:0 auto 10px auto;
width:340px;
padding:5px;
background:#c0392b;
color:white;
position:relative;
margin-bottom:10px;
}
.promo1{
float:left;
margin-right:5px;
width:170px;
height:55px;
background:#c0392b;
padding-top:5px;
padding-top:5px;
margin-left:50px;
}
.promo2{
float:right;
margin-right:50px;
width:170px;
height:55px;
background:#c0392b;
padding-top:5px;
margin-bottom:10px;
}
.menu{
width:450px;
height:35px;
background:#3498DB;
margin-top:5px;
margin-left:0px;
margin-bottom:10px;
}
.wrapper2{
min-height:900px;
background:white;
margin-bottom:10px;
}
.left{
float:left;
height:100px;
width:70px;
background:#3498DB;
margin-left:50px;
}
.main{
width:180px;
height:100px;
background:#3498DB;
margin-left:130px;
}
.right{
float:right;
height:100px;
width:70px;
background:#3498DB;
margin-right:60px;
padding-top: 5px;
padding-left: 5px;
}
.wrapper3 {
width:450px;
height:50px;
color:white;
background:#34495e;
}
.fotter{
width:450px;
height:40px;
margin-left:50px;
color:white;
background:#34495e;
}
буду пробовать…!!!