Один div залезает на другой

15.06.2013, 13:22. **Показов** 17284. **Ответов** 3

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

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

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
* {
    margin: 0;
    padding: 0;
}
body {
    font: 7pt Cambriab;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 750px;
    margin: 0 auto;
}
/* Head
-----------------------------------------------------------------------------*/
#head { 
    margin: 0 auto;
    width: 750px;
    height: 170px;
    background-image: url(img/header.png);
}
    #head_t1 {
        width: 344px;
        height: 147px;
        margin-left: 69px;
        margin-top: 18px;
        float: left;
    }
        #head_t1_akcia {
            width: 344px;
            height: 42px;
            float: left;
        }
        #head_t1_buisness {
            margin-top: 13px;
            width: 344px;
            height: 23px;
            float: left;
        }
        #head_t1_other {
            margin-top: 9px;
            width: 344px;
            height: 31px;
            float: left;
        }
            #head_t1_other_dlya {
                width: 38px;
                height: 31px;
                float: left;
            }
            #head_t1_other_privinv {
                width: 306px;
                height: 31px;
                float: left;
            }
    #head_t2 {
        width: 337px;
        height: 138px;
        margin-top: 27px;
        float: left;
    }
/* Garantii
-----------------------------------------------------------------------------*/
#gar {
    margin: 0 auto;
    width: 750px;
    height: 645px;
    background-color: #eeeeee;
}
    #gar1 {
        margin-top: 15px;
        margin-left: 68px;
        width: 609px;
        height: 132px;
        float: left;
    }
        #gar1_t1 {
            width: 345px;
            height: 132px;
            float: left;
        }
        #gar1_t2 {
            width: 264px;
            height: 132px;
            float: left;
        }
    #gar2 {
        margin-bottom: 0px;
        margin: 0 auto;
        width: 618px;
        height: 498px;
        background-image: url(img/gar.png);
    }

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
 
<body>
 
<div id="wrapper">
 
    <div id="head">
        <div id="head_t1">
            <div id="head_t1_akcia">
            
                <span class="akcia_1">
                    АКЦИЯ
                </span>
                
                <br />
                
                <span class="na_razrab">
                на разработку
                </span>
                
            </div>
            
            <div id="head_t1_buisness">
                <span class="buisness">
                БИЗНЕС ПЛАНА
                </span>
            </div>
            <div id="head_t1_other">
                <div id="head_t1_other_dlya">
                    <span class="dlya">
                    для
                    </span>
                </div>
                
                <div id="head_t1_other_privinv">
                    <span class="privinv">ПРИВЛЕЧЕНИЯ</span><br /><span class="privinv">ИНВЕСТОРА</span>
                </div>
            </div>
        </div>
        <div id="head_t2">
        <p>
        <span class="t2_1">Сейчас вы можете сэкономить</span><br />
        <span class="t2_3">от</span> <span class="t2_4">10 000</span> <span class="t2_3">до</span> <span class="t2_4">80 000 рублей</span><br />
        <span class="t2_1">на разработке бизнес плана.</span><br />
        <span class="t2_1">И получить очень</span> <span class="t2_2">хороший</span> <span class="t2_1">полностью</span><br />
        <span class="t2_2">проработанный</span> <span class="t2_1">проект.</span><br />
        </p>
        
        </div>
    </div><!-- #head -->
    
    <div id="gar">
        <div id="gar1">
            <div id="gar1_t1">
                <span class="t3_1">Бизнес план</span> <span class="t3_2">будет разработан</span><br />
                <span class="t3_2">профессионалами с опытом</span><br />
                <span class="t3_2">разработки более</span> <span class="t3_1">350 проектов</span><span class="t3_2">, с</span><br />
                <span class="t3_2">опытом работы с инвесторами</span><br />
                <span class="t3_2">разного уровня и со всеми</span> <span class="t3_1">ТОП</span><span class="t3_2">овыми</span><br />
                <span class="t3_2">российскими Банками.</span>
            </div>
            
            <div id="gar1_t2">
                <span class="t3_2">А значит, вы получите Бизнес</span><br />
                <span class="t3_2">план, который </span><span class="t3_1">полностью</span><br />
                <span class="t3_1">удовлетворит</span> <span class="t3_2">всем требованиям</span><br />
                <span class="t3_2">даже самых придирчивых</span><br />
                <span class="t3_2">инвесторов.</span>
            </div>
        </div>
        
        <div id="gar2">
        
        </div>
    </div>
 
</div><!-- #wrapper -->
 
</body>
</html>

Мне надо, чтобы div gar2 прижимался к низу div'a gar, но вместо этого он налазит на gar1. Подскажите, что делать, плз.

@TabulaRasa · 15.06.2013, 18:48

Если я правильно понял то в css gar2 надо написать:

CSS
1
clear:both;

Donald28 · 15.06.2013, 23:03

а меня предположение, что содержимое gar1 больше, чем его высота (132px). Поэтому корректнее сказать, что содержимое gar1 налезает на gar2

@Forastero · 15.06.2013, 23:41

Вы для блока gar1 задали свойство float: left;
Таким образом он вышел из общего потока, и приподнялся над всеми остальными блоками.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	15.06.2013, 23:03
	а меня предположение, что содержимое gar1 больше, чем его высота (132px). Поэтому корректнее сказать, что содержимое gar1 налезает на gar2 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	15.06.2013, 23:41
	Вы для блока gar1 задали свойство float: left; Таким образом он вышел из общего потока, и приподнялся над всеми остальными блоками. 0