Проверьте код.Интересна критика, что можно исправить. (Испытание: строим сетку 27/32)

Курсы §15. Сетки
1

Имя файла изображения1327×876 81.8 KB

Вот сам код:
HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="layout-positioner">
            <div class="layout-column layout-column-1">
                Header
            </div>
            </div>
        <div class="menu">
        <div class="layout-positioner">
        <div class="layout-column-2">
            Menu
        </div>
        </div>
        </div>
        <div class="layout-positioner">
        <div class="layout-column layout-column-3">
            Promo 1
            </div>
            
        <div class="layout-column layout-column-4">
            Promo 2
            </div>
        </div>
        </div>
        </div>
        
        <div class="content">
        <div class="layout-positioner">
        <div class="layout-column left">
            Left
        </div>    
        <div class="layout-column main">
            Main
        </div>
        <div class="layout-column right">
        Right
        </div>
        </div>
        </div>
        <div class="footer">
        <div class="layout-positioner">
        <div class="layout-column">
        Footer
        </div>
        </div>
        </div>
    </body>
</html>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}
.header{
    background-color: #34495e;
    padding:10px 0;
    }

.header .layout-positioner{
   
   width: 350px;
   margin: 0 auto;
      
}
.header .layout-column{
    color: white;
    background:  #c0392b;

    
    
}
.header .layout-column-1{
    min-height: 25px;
    width: 340px;
    padding: 5px 5px;
   
}
.header .menu{
    background-color: #3498DB;
    margin: 10px 0;
    height: 35px;
}
.header .menu .layout-column-2{
    padding: 5px 5px;
}
.header .layout-column-3{
    width: 160px;
    min-height: 50px;
    float: left;
    margin-right: 10px;
    padding: 5px 5px;
    
}
.header .layout-column-4{
    width: 160px;
    min-height: 50px;
    float: right;
    padding: 5px 5px;
}
.layout-positioner::after{
    display: table;
    content:"";
    clear: both;
}/*конец шапки*/

.content{/*контент*/
    background-color: #ffffff;
    padding:10px 0;
}
.content .layout-column{
    background-color: #3498DB;
}
.content .left,.right{
   float: left;
   width: 60px;
   min-height: 100px;
   margin-right:10px;
   padding: 5px 5px;
}
.content .main{
    float: left;
    width: 180px;
    min-height: 100px;
    margin-right:10px;
    padding: 5px 5px;
}
.content .right:last-child{
    margin-right: 0;
}

.content .layout-positioner{
   
   width: 350px;
   margin: 0 auto;
}/*конец контента*/

.footer{
    background-color: #34495e;
}
.footer .layout-column{
    height: 25px;
    padding: 5px 5px;
}
.footer .layout-positioner{
    width: 350px;
    margin: 0 auto;
}
2

1.Общие классы правильно выделять - общего “центровщика” я бы вынес отдельно в css.
2. [quote=“Mabby, post:1, topic:5556”]
.content .left,.right
[/quote]
Думаю правильней будет написать
.content .left,
.content .right { }

1 лайк