Сетки [27/32] [100%] Нуждаюсь в замечаниях по коду.

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

[code]`

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
`[/code]

[code]
`html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
padding-top:10px

}

.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.head {
height:170px;
background:#34495e;
}
.header {
width:340px;
height: 25px;
background:#c0392b;
padding:5px;
}
.menu {
width: 395px;
height:30px;
background: #3498DB;
margin-top:10px;
padding: 5px 0 0 55px
}
.promo {
width:160px;
height:50px;
padding:5px;
}
.promo1 {
float:left;
background: #c0392b;
}
.promo2 {
float:right;
background: #c0392b;
}
.features {
height:130px;

}
.side {
width:60px;
height:100px;
background: #3498DB;
padding:5px;
}
.left {
float:left;
}
.main {
width:180px;
height:100px;
background: #3498DB;
float:left;
margin-left:10px;
padding: 5px;
}
.right {
float:right;
}
.footer {
height:35px;
background:#34495e;
padding:5px 0 0 55px
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/`[/code]

2

Это должен центровщик быть, .layout-positioner. Фиксированные высоты замените на min-height.
Почему для .main вы не добавили класс .side?

1 лайк
3

Только когда прочитал это додумался, что код можно сократить)
Во время написания меня почему-то не посетили такие мысли.

С этим классом у меня проблемы, пока не могу толком понять как что работает. Как правильно его использовать для центрования по замечанию?
Указывать в нем внутренние отступы и потом уже отталкиваясь от этого указывать размеры контейнеров?

4

Почитайте эту тему. Разбирали не так давно.

5

Гениально!
Спасибо