Не получается сделать footer в финальном задании

Курсы §7. [Архив] Знакомство с CSS
1

Не могу понять, что нужно сделать, помогите пожалуйста!
У меня в стилях элемента вот это:
margin-top:210px;
width:90%;

2

Здесь должно быть clear: both;, а ширину прописывать не надо. Отступ между футером и блоком гораздо меньше.

3

Все равно не получается… Что то на этом задании зависла и никак=( Ну, то есть 92 процента есть, но дальше не пойму
А почему отступ гораздо меньше? Он вроде почти встает как надо, немного не туда…

4

Вы логически рассуждайте. Разве там 210px?
Если вам пришлось методом подстановки подбирать значение, значит ошибка в другом месте.
Давайте весь код посмотрим.

5

/* Общие стили для документа и блоков, менять не надо */

body {
width: 450px;
margin: 0;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
padding: 10px 20px 10px 20px;
background-color: #f5f5f5;
border: 2px solid #cccccc;
}

.logo,
.contacts,
.footer
{background-color:#333333;
color:#ffffff;}

/* Собственные стили блоков */

.header {
min-height: 40px;
margin-bottom: 20px;
}

.logo {
float: left;
width: 230px;
text-align: center;
font-weight:bold;

}

.contacts {
float: right;
width: 110px;
text-align: center;
font-style:italic;
}

.about-us {
width: 230px;
margin-bottom: 10px;
float:left;
font-size:10px;

}

.about-us h1 {

}

.about-us p {
font-size: 12px;
}

.main-menu {
width: 110px;
float:right;
}

.footer {

clear:both;
margin-top:210px;

}

6

смотрите, у вас для footer прописано свойство clear:both; Это означает, что footer будет уже находится ниже всех плавающих элементов. Задайте нижний внешний отступ для блока about-us - и вы получите необходимый промежуток перед футером. (сейчас ваши 210px - это расстояние до нижнего края header. Представьте, что у вас увеличилось количество строк в about-us - футер все равно отодвинется за счет свойства clear:both;, а вот отступ в 210px уже соблюдаться не будет - т.е. CSS-коде будет неработающая, а значит, не нужная строка)

1 лайк
7

немного коряво объяснила, т.е. маргин останется все равно 210px, но изначальную функцию - отодвигание футера на необходимое расстояния от, в том числе, about-us - он выполнять не будет

8

Сделала
.about-us {
width: 230px;
margin-bottom: 10px;
float:left;
font-size:10px;
margin-bottom:20px;

и все получилось. Спасибо большое!

9

а вы не могли бы объяснить, почему если задать футеру маргин топ, то расстояние считается именно от хедера, а не от эбаут ас?