Смещение div блоков

@mixternnik · Регистрация: 30.07.2015

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

В блоке header есть несколько div'ов которые не хотят оставаться на местах и съезжают из div блока. В chrome отображается нигде не описанный margin до правого конца страницы. Собственно вопрос, почему это происходит и как это исправить?

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
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
 
<div class="home">
<a href="" class="link">
<div class="home-text">
Главная
</div>
</a>
 
</div>
<div class="somethink">
 
 
</div>
<div>
вход
</div>
</div>
<div class="body"></div>
<div class="footer">
<div class="copyright">
<p class="copyright-text">
© 2016 mixtern
</p>
</div>
</div>
</body>
</html>

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
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
54
55
56
div {
    margin:0px;
    padding:0px;
}
.link {
    text-decoration: none; 
    vertical-align: middle; 
}
.header{
    background-image:linear-gradient(to bottom, #0F77FF -10%, blue 50%, #0F77FF 110%);
    width:calc(100% - 6px);
    height:calc(10% - 6px);
    border-image:linear-gradient(to bottom, #0F77FF -10%, blue 50%, #0F77FF 110%);
}
.home {
    padding-left:20%;
    width:15%;
    height:100%;
    padding-right:0px;
}
.home-text {
    vertical-align:middle;
    margin: 0px;
    width:100%;
    height: 100%;
    padding-left:30%;
    padding-top:7.5%;
    font-size:24px;
    color:white;
    font-family:serif;
    font-weight:bold;
}
.somethink {
    height:100%;
    width:20%;
}
.body {
    height:85%;
}
.footer{
    background-image:linear-gradient(to bottom, #0F77FF -10%, blue 50%, #0F77FF 110%);
    width:calc(100% - 6px);
    height:calc(5% - 6px); 
    border-image:linear-gradient(to bottom, #0F77FF -10%, blue 50%, #0F77FF 110%);
}
.copyright {
    width:calc(10% + 100px );
    float: right;
    text-overflow: clip;
}
.copyright-text {
    margin:0px;
    height:50%;
    margin-top:2%;
    color:#FFFFFF;
}

@PavelNovichok · 13.01.2016, 22:43

Попробуйте установить относительное и фиксированное позиционирование.

@Андрюшатина · 13.01.2016, 23:12

Ну для начала тут непонятно зачем нужно обтекание.
Если убрать флоат, то див вернется в боди.

CSS
1
2
3
4
.copyright {
    width:calc(10% + 100px );
    text-overflow: clip;
}

а по поводу margin я не понял вопроса. Где именно, в каком классе (блоке)?

Spirt Tesla · 14.01.2016, 04:56

Есть такая штука,называется reset.css, делает сброс отступов,так как в каждом браузере по умолчанию для элементов есть свои отступы.Еще дам совет-соблюдайте иерархию при написании кода,чтоб было понятнее что во что вложено,у вас не так много кода,и все же его уже неудобно читать.Пример

HTML5
1
2
3
4
5
6
7
8
9
<div>
  <div>
    <div>
      <p>
        <a></a>
      </p>
    </div>
  </div>
</div>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@PavelNovichok 22 / 22 / 7 Регистрация: 04.07.2015 Сообщений: 161
	13.01.2016, 22:43
	Попробуйте установить относительное и фиксированное позиционирование. 0