27/32 Строим сетку 100%

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

Добрый вечер. Мой код дал 100%. Но сочиняла 2 часа, и мне кажется, что есть такие элементы, что “уже немодные”. Посмотрите, пожалуйста. Спасибо!

<body>
    <div class="header">
        <div class="layout-positioner">
        <div class="layout-column-1 layout-column"> Header</div>
        </div>
        </div>
    <div class="layout-column-2"> Menu </div>
         <div class="header clearfix">
             <div class="layout-positioner">
        <div class="layout-column-3 layout-column"> Promo 1 </div>
        <div class="layout-column-4 layout-column"> Promo 2 </div>
        </div>
        </div>
    <div class="features">
        <div class="layout-positioner">
        <div class="left layout-column">Left</div>
        <div class="mein layout-column">Main</div>
        <div class="right layout-column">Right</div>
        </div>
    </div>
    <div class="footer"> Footer </div>
</body>

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

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

.header .layout-column {
background: #c0392b;
}
.layout-column-1 {
min-height: 25px;
padding: 5px 5px;
}

.layout-column-2 {
background: #3498DB;
margin-top: -10px;
height: 25px;
padding: 5px 55px;
}
.layout-column-3 {
float: left;
height: 50px;
width: 160px;
padding: 5px 5px;
margin-right: 10px;
}
.layout-column-4 {
float: right;
height: 50px;
width: 160px;
padding: 5px 5px;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0px auto;
}
.features .layout-column {
background: #3498DB;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
}
.features .left {
float: left;
width: 60px;
padding: 5px 5px;

}
.features .mein {
float: left;
width: 180px;
padding: 5px 5px;
}
.features .right {
float: right;
margin-right: 0px;
width: 60px;
padding: 5px 5px;
}
.footer {
color: white;
background: #34495e;
padding: 10px;
clear: both;
height: 25px;
padding: 5px 55px;
}

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

2

Меню и футер не центрируются.
Все height замените на min-height…

3

Обернула эти блок Menu, Footer в блоки и задала им тоже класс layout-positioner. Теперь центрируются.
Посмотрите, пожалуйста, теперь так, как нужно?

    <div class="header">
        <div class="layout-positioner">
        <div class="layout-column-1 layout-column"> Header</div>
        </div>
        </div>
        <div class="menumain">
         <div class="layout-positioner">
    <div class="layout-column-2"> Menu 
        </div>
    </div>
    </div>
         <div class="header clearfix">
             <div class="layout-positioner">
        <div class="layout-column-3 layout-column"> Promo 1 </div>
        <div class="layout-column-4 layout-column"> Promo 2 </div>
        </div>
        </div>
    <div class="features">
        <div class="layout-positioner">
        <div class="left layout-column">Left</div>
        <div class="mein layout-column">Main</div>
        <div class="right layout-column">Right</div>
        </div>
    </div>
    <div class="footermain">
    <div class="layout-positioner">
    <div class="footer"> Footer </div>
    </div>
    </div>

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

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

.header .layout-column {
background: #c0392b;
}
.layout-column-1 {
min-height: 25px;
padding: 5px 5px;
}

.layout-column-2 {
background: #3498DB;
margin-top: -10px;
min-height: 25px;
padding: 5px 5px;
}
.layout-column-3 {
float: left;
min-height: 50px;
width: 160px;
padding: 5px 5px;
margin-right: 10px;
}
.layout-column-4 {
float: right;
min-height: 50px;
width: 160px;
padding: 5px 5px;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0px auto;
}
.features .layout-column {
background: #3498DB;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
}
.features .left {
float: left;
width: 60px;
padding: 5px 5px;

}
.features .mein {
float: left;
width: 180px;
padding: 5px 5px;
}
.features .right {
float: right;
margin-right: 0px;
width: 60px;
padding: 5px 5px;
}
.footer {
color: white;
background: #34495e;
padding: 10px;
padding: 5px 5px;
}
.footermain {
background: #34495e;
clear: both;
min-height: 35px;
}
.menumain {
background: #3498DB;
margin-top: -10px;
min-height: 25px;
}

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

1 лайк
4

Нормально.
Все центрируется, но не всё растягивается…
Вы не заменили height на min-height в .layout-column, из-за чего не растягиваются по вертикали left, main и right…
Добавьте немного текста в эти блоки и посмотрите, что происходит…

min-height: 35px; перенесите из .footermain в .footer
min-height: 25px в .menumain можно вообще убрать, потому что оно уже есть в layout-column-2…

…в общем, есть ещё пара-тройка несущественных неточностей, которые Вы сможете находить легко и быстро, если будете продолжать учиться.

1 лайк