Все время кажется, что я нагромождаю. Где-то можно/нужно поправить?
<body> <div class="top"> <div class="top-header"> <div class="layout-positioner clearfix"> <div class="header">Header</div> </div> </div> <div class="top-menu"> <div class="layout-positioner1 clearfix"> <div class="menu">Menu</div> </div> </div> <div class="top-promo"> <div class="layout-positioner clearfix"> <div class="promo">Promo 1</div> <div class="promo">Promo 2</div> </div> </div> </div> <div class="middle"> <div class="layout-positioner clearfix"> <div class="content">Left</div> <div class="content-main">Main</div> <div class="content">Right</div> </div> </div> <div class="bottom"> <div class="layout-positioner1 clearfix"> <div class="footer">Footer</div> </div> <div> </body>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
min-height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0px auto;
padding: 10px;
}
.layout-positioner1 {
width: 350px;
margin: 0px auto;
}
.top,
.bottom {
width: 450px;
background-color: #34495e;
}
.middle {
width: 450px;
}
.promo,
.content,
.content-main,
.header,
.menu,
.footer {
padding: 5px;
}
.menu {
box-sizing: border-box;
}
.header,
.promo {
background-color: #c0392b;
box-sizing: border-box;
}
.top-menu {
background: #3498DB;
}
.header,
.menu {
min-height: 35px;
}
.promo {
min-height: 60px;
width: 170px;
float: left;
margin-right: 10px;
}
.promo:last-child,
.content:last-child {
margin-right: 0px;
}
.content,
.content-main {
float: left;
min-height: 110px;
background: #3498DB;
margin-right: 10px;
box-sizing: border-box;
}
.content {
width: 70px;
}
.content-main {
width: 190px;
}
.footer {
min-height: 25px;
}