div наползают друг на друга

@qlipoth · Регистрация: 27.04.2013

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

Здравствуйте, скажите пожалуйста как решить проблему с наложением блоков друг на друга
есть 2 таблицы помещененные в разные блоки. При задании свойства margin-top у таблицы в блоке <tm>,
сдвигается также и верхняя таблица из блока <firsttable>. Как сделать чтобы сдвигалась только таблица из блока tm?

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div id = 'shapka'>
                <div id = 'firsttable'>
                    <table>
                        <tr>
                            <td width="60">
                                <p> <a href = '#.html'> Home </a></p>
                            </td>
                            <td>
                                <p> <a href = '#.html'> About Us </a></p>
                            </td>
                            <td>
                                <p> <a href = '#.html'> Contact </a></p>
                            </td>
                            <td class = 'blog'>
                                <p> <a href = '#.html'> Blog </a></p>
                            </td>
                            <td class = 'posts'>
                                <p > Please subscribe to: <a href = '#.html'>Posts </a></p>
                            </td>
                            <td class = 'com' width = '30'>
                                <p><a href = '#.html'>Comments </a></p>
                            </td>
                            <td class = 'email' width = '20'>
                                <p><a href = '#.html'>Email</a></p>
                            </td>
                            
                        </tr>
                    </table>
                
                </div>
        
        <div id = 'box'>
            <p id = 'btext'>Box&amp;Cube</p>
            <p id = 'stext'>CREATE &amp; INNOVATE SOLUTIONS</p>
        </div>
    
        
        </div>
        
        <div id = 'tm'>
                <table>
            <tr>
                <td>
                    <p><a href = '#.html'>WEB PROFESSIONALS </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>BUSINESS</a></p>
                </td>
                <td>
                    <p><a href = '#.html'>WEB DSIGN</a></p>
                </td>
                <td>
                    <p><a href = '#.html'>MEDIA  </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>ENTERTAINTMENT   </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>NON-PROFIT  </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>INSTITUTIONS </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>PORTALS </a></p>
                </td>
                
            </tr>
        </table>
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#firsttable table
    {float: right;
    margin-right: 33px;
    margin-top: 13px;
    width:56%;
    text-align: center;
    }
#tm table
    {
    margin-top:100px;
    font-family: Arial;
    width:100%;
    text-align: center;
    
    }

@carambaman · 03.08.2013, 20:36

если эти 2 таблицы друг под другом то задвайте tm clear:both; и было бы не плохо увидеть визуально как она расположены

@Rodion2703 · 03.08.2013, 20:51

У меня всё норм :\

@qlipoth · 03.08.2013, 22:11 **[ТС]**

Решил проблему установкой width 100% у firsttable. Почему-то отступ сверху у таблицы tm отсчитывался не от нижней границы firsttable а от body . Очень странно, ведь у самого контейнера width div в котором находится таблица width был 100%. Почему?

@qlipoth · 03.08.2013, 22:29 **[ТС]**

вот опять столкнулся . два контейнера - один под другим.

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
<div id = 'forma'>
            <form name = 'searchform' action = '#' method = 'post'>
                    <div id="search">
                        <input type="search" name="q">
                        <input type="IMAGE" src="images/s.jpg" value="">
                    </div>
            </form>
        </div>
        
        
        
        <div id = 'tm'>
                <table>
            <tr>
                <td>
                    <p><a href = '#.html'>WEB PROFESSIONALS </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>BUSINESS</a></p>
                </td>
                <td>
                    <p><a href = '#.html'>WEB DSIGN</a></p>
                </td>
                <td>
                    <p><a href = '#.html'>MEDIA  </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>ENTERTAINTMENT   </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>NON-PROFIT  </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>INSTITUTIONS </a></p>
                </td>
                <td>
                    <p><a href = '#.html'>PORTALS </a></p>
                </td>
                
            </tr>
        </table>
        </div>

на картинке 1 расположение элементов , на картинке 2 margin подсвечен желтым, и он отсчитывается не от <div forma> а от body. Как так?

@Rodion2703 · 03.08.2013, 22:36

Хм, у меня всё нормально, а могли бы вы скинуть исходники?

@qlipoth · 03.08.2013, 22:40 **[ТС]**

Rodion2703, прилагаю архив с исходниками

@Rodion2703 · 04.08.2013, 01:14

Если убрать position:absolute; у #box видно что лого вниз ушло => наверное браузер думает, что position:absolute; затягивает за собой верх #tm.

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

Добавлено через 1 минуту
Вспомнил!!! Была однажды такая статья. В общем если поставить border у box то он будет от border идти, как то так вроде бы

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

Теперь точно понял. margin - внешний отступ и он отталкивается от блока который рядом. блок box - position:absolut; те он над ним.

@qlipoth · 04.08.2013, 01:21 **[ТС]**

Rodion2703, тогда он должен действительно отталкиваться от нижней границы box, но отталкивается от body

@Rodion2703 · 04.08.2013, 01:21

#box - над ним.

@qlipoth · 04.08.2013, 01:29 **[ТС]**

Rodion2703, да, box над ним. но вы взгляните на рисунок 2 , желтым обозначена рамкa margin. Если бы отступ шел от блока с box то box не попал бы в желтую область

@Rodion2703 · 04.08.2013, 01:31

Ну да, значит он не идет от box, потому что box на ним, а margin под ним

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	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 полиномов. . .

@carambaman 8 / 8 / 1 Регистрация: 30.04.2013 Сообщений: 75
	03.08.2013, 20:36
	если эти 2 таблицы друг под другом то задвайте tm clear:both; и было бы не плохо увидеть визуально как она расположены 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	03.08.2013, 20:51
	У меня всё норм :\ 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	03.08.2013, 22:11 [ТС]
	Решил проблему установкой width 100% у firsttable. Почему-то отступ сверху у таблицы tm отсчитывался не от нижней границы firsttable а от body . Очень странно, ведь у самого контейнера width div в котором находится таблица width был 100%. Почему? 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	03.08.2013, 22:36
	Хм, у меня всё нормально, а могли бы вы скинуть исходники? 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	04.08.2013, 01:14
	Если убрать position:absolute; у #box видно что лого вниз ушло => наверное браузер думает, что position:absolute; затягивает за собой верх #tm. Добавлено через 2 минуты А не бред Добавлено через 1 минуту Вспомнил!!! Была однажды такая статья. В общем если поставить border у box то он будет от border идти, как то так вроде бы Добавлено через 10 минут А нет Теперь точно понял. margin - внешний отступ и он отталкивается от блока который рядом. блок box - position:absolut; те он над ним. 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	04.08.2013, 01:21 [ТС]
	Rodion2703, тогда он должен действительно отталкиваться от нижней границы box, но отталкивается от body 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	04.08.2013, 01:21
	#box - над ним. 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	04.08.2013, 01:29 [ТС]
	Rodion2703, да, box над ним. но вы взгляните на рисунок 2 , желтым обозначена рамкa margin. Если бы отступ шел от блока с box то box не попал бы в желтую область 0

@Rodion2703 24 / 20 / 5 Регистрация: 06.01.2013 Сообщений: 819
	04.08.2013, 01:31
	Ну да, значит он не идет от box, потому что box на ним, а margin под ним 0