Сетки / Испытание: строим сетку [27/32]. Оцените, пожалуйста, код.

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

Добрый вечер, прокомментируйте, пожалуйста, насколько оптимально выполнено задание. Я так долго с ним мучалась, что хочется добить его на все 100%. https://codepen.io/Ailushka/pen/VXvrbW

1 лайк
2

Так а в чем проблема то? На сколько выполнено тогда?

3

Отлично выполнено!

4

Выполнено на 100%. Но это мой второй вариант выполнения на 100%. Первый точно был не совсем корректным, так как некоторые элементы вместо центровщика я выравнивала марджинами. Поэтому и хотела посоветоваться, насколько правильно выполнен этот вариант.

5

Спасибо большое! Во многом благодаря Вашим советам в похожей теме. Единственное, я так до конца и не поняла, почему центровщики нужно прописывать отдельным родительским блоком, а не добавлять классом к самим элементам… И в дивах и section запуталась, что и где лучше использовать. Но в целом всё стало намного понятнее :+1:

6

Вставьте код с таким вариантом решения – разберём +/-.

7

Добрый день, хотел бы узнать у специалистов, как лучше можно оптимизировать код:

  HTML код:     
  <div class="container cellsfix">
        <div class="container1">
            <div class="header">
                Header
            </div>
        </div>
        <div class="menu-main">
            <div class="container1 header-menu">
                Menu
            </div>
        </div>
        <div class="container1">
            <div class="header-promo">
                <div class="header-promo1">
                    Promo 1
                </div>
                <div class="header-promo2">
                    Promo 2
                </div>
            </div>
        </div>
    </div>
    <div class="container1 cellsfix">
        <div class="column">
            <div class="column-left">
                Left
            </div>
            <div class="column-main">
                Main
            </div>
            <div class="column-right">
                Right
            </div>
        </div>
    </div>
    <div class="container">
        <div class="container1">
            <div class="footer">
                Footer
            </div>
        </div>
    </div>

CSS код:

.cellsfix:after {
content: "";
display: table;
clear: both;

}

.container {
background: #34495e;
padding-top: 5px;
}

.container1 {
width: 350px;
margin: 0 auto 10px;

}

.header {
background: #c0392b;
margin: 5px auto;
padding-top: 5px;
padding-left: 5px;
min-height: 30px;
}

.menu-main {
background: #3498DB;
min-height: 30px;
padding-top: 5px;
padding-left: 10px;
}

.header-promo {
/padding-bottom: 10px;/
min-height: 60px;
}

.header-promo1,
.header-promo2 {
background: #c0392b;
width: 160px;
min-height: 50px;
padding: 5px;
}

.header-promo1 {
float: left;
}

.header-promo2 {
float: right;
}

.column {
margin-top: 10px;
}

.column-left,
.column-main,
.column-right {
background: #3498DB;
min-height: 100px;
padding: 5px;
}

.column-left,
.column-main {
float: left;
margin-right: 10px;
}

.column-right {
float: right;
}

.column-left,
.column-right {
width: 60px;
}

.column-main {
width: 180px;
}

.footer {
padding-left: 5px;
min-height: 30px;
}

И еще хотел бы для себя понять, когда делаются три столбца как лучше флоатить, все три float: left и маргин-справа: … px (а после у третьего столбца его отключать)
или же первые два столбца float: left, а третий float: right?
И если третий прижимать вправо, то можно ли у среднего настроить ширину не фиксированно, а чтоб она автоматом растянулась до третьего (конечно учитывая маргин)?