Почему footer на реагирует на margin-top?

@Тыр-тыр · Регистрация: 29.08.2014

Студворк — интернет-сервис помощи студентам

Задаю футеру маргин сверху и снизу, а он, падла, совсем не реагирует. Не хочет отодвигаться от верхнего дива.

CSS
1
2
3
footer {
    margin: 20px 0;
}

HTML5
1
2
3
4
5
<footer>
        <ul>
            <li>Copyright &copy; 2002-2014</li>
        </ul>
</footer>

@сахей · 27.10.2014, 22:40

задай у блока перед нит margin-bottom, и попробуй задать float:left у футера

@ludmila-sv · 28.10.2014, 11:08

Приведите весь код целиком. Здесь дело может быть в элементах, которые над футером.

@Тыр-тыр · 28.10.2014, 11:16 **[ТС]**

Сообщение от сахей

задай у блока перед нит margin-bottom, и попробуй задать float:left у футера

Речь о маргине для футера. При чём тут маргин для верхнего блока! Я говорю про Ерёму, а мне про Фому

Полная неадекватность.

Добавлено через 2 минуты

Сообщение от ludmila-sv

Приведите весь код целиком. Здесь дело может быть в элементах, которые над футером.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
header {
    background-color: #dbdbdb;
    padding: 0;
    margin: 0;
}
header h1 {
    text-align: left;
    color: white;
    line-height: normal;
}
nav {
    line-height: 30px;
    background-color: #eeeeee;
}
.left_column {
    background-color: #9d9d9d;
    padding: 9px;
    float: left;
}
section {
    background-color: #d2d2d2;
    float: left;
    width: 33%;
}
footer {
    background-color: #d7d7d7;
    clear: both;
}

Добавлено через 1 минуту

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
 
<head>
 
<title></title>
 
<link rel="stylesheet" href="css/style.css" type="text/css">
 
</head>
 
<body>
 
<header>
<h1><a href="#"></a></h1>
<p class="tagline">Tag line goes here, tag line goes here, tag line goes here</p>
<div class="header_search_box"></div>
<nav class="primary_nav"></nav>
</header>
 
<div class="left_column">
    
    <section class="">
        <p>Text, text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text.</p>
    </section>
    
    <section class="">
        <p>Text, text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text.</p>
    </section>
    
    <section class="">
        <p>Text, text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text, text,
        text, text, text, text, text, text, text, text, text, text, text.</p>
    </section>
    
    
 
</div>
 
<footer>
 
        <ul>
            <li>Copyright &copy; 2002-2014</li>
        </ul>
</footer>
 
</body>
</html>

@ludmila-sv · 28.10.2014, 11:50

Если для .left_column убрать float и поставить overflow: auto; то маргин заработает.

Добавлено через 4 минуты
Или, как писалось выше, оставьте float:left у .left_column и поставьте float:left у футера

@Fedor92 · 28.10.2014, 12:02

Поставили свойство clear: both; у футера и ждёте адекватных ответов почему margin не работает? Обхохотаться...

Вам Сахей между прочим дал правильный совет, а Вы его ответ называете неадекватным - без кода Вам любой верстальщик даст именно этот совет... Короче Вы поняли о чём речь: убираем clear: both; , ставим футеру float:left , ставим margin и будет Вам счастье...

@Тыр-тыр · 28.10.2014, 12:30 **[ТС]**

Сообщение от Fedor92

Вам Сахей между прочим дал правильный совет, а Вы его ответ называете неадекватным

Абсолютно неправильный. Он говорил об маргине для верхнего дива. А я спрашивал о футере. Это две разные вещи. Просто сделать маргин между футером и верхним дивом я и сам знаю как

Но мне нужен был маргин для футера, а не для верхнего дива.

Добавлено через 2 минуты

Сообщение от Fedor92

убираем clear: both; , ставим футеру float:left , ставим margin и будет Вам счастье...

float:left не катит в моём случае.

@Fedor92 · 28.10.2014, 12:33

Не знаю, что не катит у меня на раз прокатило... Margin-bottom у верхнего блока = margin-top блока нижнего - всё логично...

@Тыр-тыр · 28.10.2014, 12:43 **[ТС]**

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

Короче, дело не в том КАК что-то сделать, а в том, чтобы код был простой. А то понафигачат кучу кода нужного и ненужного.

@Academik · 28.10.2014, 12:50

Тыр-тыр, если используйте float обязательно обнуляйте обтекание после этого. Над футером попробуйте добавить:

HTML5
1
<div style="clear: both;"></div>

@Fedor92 · 28.10.2014, 12:51

width поставьте 100% и спите спокойно... Зато будете всегда знать, что футер выстроен правильно и никуда не отъедет на любой цмс...

Вот и весь код...

@сахей · 28.10.2014, 14:36

Сообщение от Тыр-тыр

Полная неадекватность.

Послушай адекватный, код получается рабочий, причем именно в твоем случае, достаточно добавить left_column отступ и футер сразу отступит
http://jsfiddle.net/e8gr3cfm/

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	27.10.2014, 22:40
	задай у блока перед нит margin-bottom, и попробуй задать float:left у футера 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	28.10.2014, 11:08
	Приведите весь код целиком. Здесь дело может быть в элементах, которые над футером. 1

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	28.10.2014, 11:50
	Если для .left_column убрать float и поставить overflow: auto; то маргин заработает. Добавлено через 4 минуты Или, как писалось выше, оставьте float:left у .left_column и поставьте float:left у футера 2

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	28.10.2014, 12:02
	Поставили свойство clear: both; у футера и ждёте адекватных ответов почему margin не работает? Обхохотаться... Вам Сахей между прочим дал правильный совет, а Вы его ответ называете неадекватным - без кода Вам любой верстальщик даст именно этот совет... Короче Вы поняли о чём речь: убираем clear: both; , ставим футеру float:left , ставим margin и будет Вам счастье... 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	28.10.2014, 12:33
	Не знаю, что не катит у меня на раз прокатило... Margin-bottom у верхнего блока = margin-top блока нижнего - всё логично... 0

@Тыр-тыр -86 / 7 / 0 Регистрация: 29.08.2014 Сообщений: 247
	28.10.2014, 12:43 [ТС]
	А у меня не катит. В смысле - нехорошо это. Ведь ширина футера тогда меняется. А зачем ей ещё дополнительно указывать ширину, если можно не указывать. Короче, дело не в том КАК что-то сделать, а в том, чтобы код был простой. А то понафигачат кучу кода нужного и ненужного. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	28.10.2014, 12:51
	width поставьте 100% и спите спокойно... Зато будете всегда знать, что футер выстроен правильно и никуда не отъедет на любой цмс... Вот и весь код... 0