Привет! Наконец добил эту сетку:triumph: Будет круто если подскажете косяки или покажете свой код. Решение по элегантности как слон после НГ, по-моему)
HTML:
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class='header'>
<div class='content-positioner'>
<div class='title title-layout'>Header</div>
</div>
</div>
<div class='menu-layout menu'>Menu</div>
</div>
<div class='features'>
<div class='content-positioner'>
<div class='column column-layout'>Promo 1</div>
<div class='column column-layout'>Promo 2</div>
</div>
</div>
<div class='shell'>
<div class='content-positioner'>
<div class='column column-layout'>Left</div>
<div class='column column-layout'>Main</div>
<div class='column column-layout'>Right</div>
</div>
</div>
<div class='footer'>
<div class='content-positioner'>
<div class='text'>Footer</div>
</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;
}
.header {
width: 450px;
min-height: 55px;
background-color: #34495e;
float: left;
}
.content-positioner {
margin: 0 auto;
width: 350px;
}
.title {
background-color: #c0392b;
padding-left: 5px;
padding-top:5px;
}
.title-layout {
width: 350px;
min-height: 35px;
margin-top: 10px;
box-sizing: border-box;
}
.menu {
background-color: #3498DB;
padding-left: 55px;
padding-top: 5px;
}
.menu-layout {
float: left;
width: 450px;
min-height: 35px;
box-sizing: border-box;
}
.features {
width: 450px;
min-height: 80px;
background-color: #34495e;
float: left;
}
.features .column {
background-color: #c0392b;
padding: 5px 0 0 5px;
}
.features .column-layout {
margin-top: 10px;
width: 170px;
min-height: 60px;
box-sizing: border-box;
}
.features .column-layout:first-child {
float:left;
}
.features .column-layout:last-child {
float:right;
}
.shell {
width: 450px;
height: 100px;
}
.shell .column {
background-color:#3498DB;
padding: 5px 0 0 5px;
}
.shell .column-layout {
width: 70px;
height: 110px;
box-sizing: border-box;
margin-right: 10px;
margin-top: 10px;
float: left;
}
.shell .column-layout:nth-child(2) {
width: 190px;
}
.shell .column-layout:nth-child(3) {
margin-right: 0;
}
.footer {
width: 450px;
min-height: 35px;
background-color: #34495e;
float: left;
margin-top: 10px;
}
.text {
padding: 5px 0 0 5px;
}