27/32 наиболее оптимальный вариант

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

Ребят, вот набросал свой вариант, как Вам? Вложенность такая на всякие случаи, для удобства.

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

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.clearfix:after{
    content: " ";
    display: table;
    clear: both;
}
.container{
    width: 350px;
    margin: auto;
}
.header,
.promo
{
    background-color: #34495e;
    padding: 10px 0;
}
.header-content {
    background-color: #c0392b;
    height: 25px;
    padding: 5px;
}
.menu{
   background-color: #3498DB; 
}
.menu-content {
    height: 25px;
    padding: 5px;
}
.promo-content {
    box-sizing: border-box;
    float: left;
    width: 170px;
    height: 60px;
    padding: 5px;
    background-color: #c0392b;
}
.promo-content:first-child{
    margin-right: 10px;    
}
.main {
    padding: 10px 0;    
}
.left,
.content,
.right{
   background-color: #3498DB;
   height: 100px;
   padding: 5px;
}
.left{
    float: left;
    height: 100px;
    width: 60px;
    margin-right: 10px;
    
}
.right{
    float: right;
    height: 100px;
    text-align: left;
    width: 60px;
}
.content{
    float: left;
    width: 180px;
}
.footer {
    background-color: #34495e;   
    height: 30px;
    padding: 5px;
}
.footer-content {
    padding: 0 5px;    
}

/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/

Есть что упростить? Более оптимальный вариант? Спасибо!

2

Можно упростить.
В этом фрагменте вы прописываете высоту сразу для трех блоков:
.left,
.content,
.right{
background-color: #3498DB;
height: 100px;
padding: 5px;
margin: 10px 0;
}
А дальше дублируете ее для каждого блока отдельно.
Также можно избавиться от класса main. Он у вас предназначен только для отступов сверху и снизу. Отступы прописать как внешние у left, content, right.

1 лайк