Завершил 27 испытание, просьба покритиковать/поделиться своим решением


#1

Привет! Наконец добил эту сетку: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;
}

#2

Почему две распорки, и в чем смысл использования одной из них на каждом блоке из трех колонок?


#3

Не удалил просто из кода сразу, они не нужны.


#4

Для меню и футера флоат не обязателен. Центровщик для меню было бы неплохо добавить.