Сетки 27/32 - 100% понимаю, что код "детский", хочется замечаний ))

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container1">
     <div class="header">Header</div>
     <div class="menu">Menu</div>
     <div class="column1">Promo 1</div>
     <div class="column2">Promo 2</div>
    </div>
    <div class="container2">
     <div class="column3">Left</div>
     <div class="column4">Main</div>
     <div class="column5">Right</div>
    </div>
     <div class="footer">Footer</div>
    </body>
</html>

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

body {
width: 450px;
height: 335px;
font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.container1 {
background-color: #34495e;
height: 165px;
padding-top: 5px;
}

.header {
background-color: #c0392b;
width: 340px;
height: 25px;
margin: 5px auto 10px;
padding: 5px;
}

.menu {
height: 30px;
background-color: #3498db;
padding-top: 5px;
padding-left: 55px;
margin-bottom: 10px;
}

.column1 {
background-color: #c0392b;
height: 50px;
width: 160px;
float: left;
padding: 5px;
margin-left: 50px;
}

.column2 {
background-color: #c0392b;
height: 50px;
width: 160px;
float: right;
padding: 5px;
margin-right: 50px;
}

.column3 {
background-color: #3498db;
height: 100px;
width: 60px;
padding: 5px;
float: left;
margin-right: 10px;
}

.column4 {
background-color: #3498db;
height: 100px;
width: 180px;
padding: 5px;
float: left;
}

.column5 {
background-color: #3498db;
height: 100px;
width: 60px;
padding: 5px;
float: right;
margin-right: 50px;
}

.container2 {
padding-top: 10px;
padding-left: 50px;
margin-bottom: 5px;
height: 115px;
}

.footer {
height: 30px;
background-color: #34495e;
padding-top: 5px;
padding-left: 55px;
clear: both;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/
Впишите сюда текст; также, отключить форматирование текста можно, начав строку с 4х пробелов

2

insert

1 лайк
3

Конгениально! Спасибо! Очень помогла подсказка )))

4

Много ошибок.
Желательно курс пройти заново, и нужно разобраться как всё работает в предыдущем задании (26/32).

5

Ок, спасибо! Но в чем основные ошибки? Нужно было центровать колонки в container1? И header не загонять в container1?

6

Смотрите сами:

2018-08-10_230526
2018-08-10_230526.png734×357 13.2 KB

Не центрируется и не растягивается.
Переделать нужно и HTML и CSS.

7

В общем, поняла буду сейчас заново проходить 26/32 - я там что-то глобальное недопоняла…

8

Спасибо! Как вы это проверяете…? У меня выдает 100%… Как это можно увидеть? ))

9

По этому испытанию здесь очень много написано.
Ищите, читайте, экспериментируйте.
Будут более конкретные вопросы – отвечу…

10

Ок, спасибо большое!! ))

11

Я закомментировал ширину в body – сетка сразу развалилась.

Потом добавил текст в каждый блок, чтобы показать,что нельзя использовать height
Все height замените на min-height.

12

Я поняла!! Спасибо! Все поняла! Буду проверять теперь через body после того, как заново курс пройду! min-height - растягивается по тексту, наверное, да?

13

Да, по вертикали. И не только текстом.

14

Как я вам благодарна!!! Спасибо!! Сутра начинаю работу над ошибками!! ))))

15

Может поможет? Помогите разобраться. Испытание: строим сетку [27/32]

16

Спасибо!! Уже открыла, но читать буду завтра - на свежую голову )) Разберу всё!!