Разъезжаются блоки div при масштабировании

@Svetlana_123 · Регистрация: 22.05.2015

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

Привет, помогите разобраться почему разъезжаются блоки при увеличении масштаба страницы или уменьшении размеров окна браузера. Блок Вывоз мусора упорно не хочет вставать в начале страницы, а за ним все последующие.
Вод код:

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
 <!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
    <title>Вывоз мусора</title>
</head>
<body>
    <div id="body">
    <div id="top">
         <div class="logo">
         <a href="#"><img src="http://dorsnab.net/assets/images/musor.jpg" /></a>
         <div class="top_phone">
            <p>Заключение договоров <h3><strong>8 (000) 000-00-00</strong></h3></p><br/>
            <p>Заказ, замена, постановка бункеров <h3><strong>8 (000) 000-000-0</strong></h3></p>
         </div>
         </div>
    </div>
    <div class="content">
    <div class="menu">
        <table>
            <tr>
                <td><a href="#"><h5>ГЛАВНАЯ</h5></a></td>
                <td><a href="#"><h5>УСЛУГИ</h5></a></td>
                <td><a href="#"><h5>О КОМПАНИИ</h5></a></td>
                <td><a href="#"><h5>КОНТАКТЫ</h5></a></td>
            </tr>
        </table>
    </div>
        <div id="main_text">
        <p>Мы предлагаем качественный вывоз мусора контейнером 8м3 на заказ недорого, а также поможем вывезти строительный и крупногабаритный мусор в любом оуруге Москвы и ближайщего подмосковье до 10-15 км.</p>
        <p>За долгие годы работы Мы зарекомендовала себя как успещно-динамично развивающияся компания со своим парком исправных автомобилей.</p>
       <p>Опытные сотрудники выполнят работу качественно и в срок.</p>
       <p>Предостовляем полный пакет документов с последующим оформлением.</p>
       <p>Активное строительство,собственное дело,офисные и торговые площадки производящие мусор,всё это наши клиенты.</p>
       <p>Гос учереждения и частные лица хотят <strong>надёжность и качество</strong> Мы реализуем мечты даже самого дотошного клиента.</p>
       <p>Помимо вывоза отходов строительного происхождения, мы занимаемся также вывозом крупногабаритного бытового мусора и уборкой снега.</p>
        </div>
    <div class="line"></div>
    <div class="block">
    <div class="first">
    <div class="vivoz_othodov_head"><a href="#">Вывоз мусора и отходов</a></div>
    <div class="vivoz_othodov">Вы обращаетесь по адресу, если вас интересует вывоз бытового твердого мусора, его утилизация и захоронение, а также вывоз и ликвидация различных отходов с рынков и торговых площадей, жилых домов и предприятий, поселков и любых других мест.</div>
    </div>
    <div class="second">
    <div class="stroi_musor_head"><a href="#">Строительный мусор</a></div>
    <div class="stroi_musor">Утилизация строительного мусора – задача сложная и трудоемкая, которая требует наличия специального разрешения, определенной техники и свободного времени. Если ваша компания не специализируется на переработке отходов, лучше доверить исполнение задачи профессионалам.</div>
    </div>
    <div class="third">
    <div class="krupnii_musor_head"><a href="#">Крупногабаритный мусор</a></div>
    <div class="krupnii_musor">Полный комплекс услуг по сбору, вывозу и утилизации КГМ
Крупногабаритный мусор (КГМ) – это отходы, размер которых превышает стандартный и не позволяет выбрасывать их в обычные контейнеры. </div>
    </div>
    <div class="fourth">
    <div class="snow_head"><a href="#">Вывоз снега</a></div>
    <div class="snow">Компания Главмусор осуществляет уборку и вывоз снега специализированным транспортом в специально отведенные места в соответствии с санитарными нормами и требованиями.</div>
    </div>
    <div class="fifth">
    <div class="container_musor_head"><a href="#">Контейнер для мусора</a></div>
    <div class="container_musor">В компании «Главмусор» вы подберете контейнер для мусора и для вывоза снега, который полностью соответствует вашим запросам. Если вы затрудняетесь с выбором контейнера, свяжитесь с менеджером и расскажите ему о своих задачах.</div>
    </div>
    <div class="six">
    <div class="pogruzka_head"><a href="#">Погрузка-разгрузка</a></div>
    <div class="pogruzka">Для  вывоза и утилизации мусора после ремонта наша компания может обеспечить ручную погрузку. Наши грузчики помогут обеспечить погрузку бытового и строительного мусора.</div>
    </div>
    <div class="seventh">
    <div class="bunkerovoz_head"><a href="#">Бункеровозы</a></div>
    <div class="bunkerovoz">Бункеровоз-мусоровоз предназначен для подъема с земли, установки на автомобиль и транспортировки специальных съемных платформ с различными видами груза. Автомобиль снабжен устройством для разгрузки платформы самосвальным способом. </div>
    </div>
    <div class="eighth">
    <div class="tbo_head"><a href="#">Вывоз и утилизация ТБО</a></div>
    <div class="tbo">Вывоз и утилизация ТБО (твердых бытовых отходов) – важный вопрос для любого домовладельца и руководителя предприятия. Накапливать отходы – значит, нарушать экологические нормы и занимать полезное пространство. Самый простой выход из ситуации – доверить вывоз ТБО в Москве компании «Главмусор».</div>
    </div>
    </div>
    <div class="hFooter"></div>
    </div> 
    <div id="footer">
        <table>
            <tr>
                <td><a href="#">Новости</a></td>
                <td><a href="#">Отзывы</a></td>
                <td><a href="#">Статьи</a></td>
                <td>г.Москва, Какой то там адрес, уже не помню какой</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS:

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}
html, body {
    height: 100%;
    min-width: 900px;
}
html{
    background: #fe860c;
}
.content {
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
}
#body{
    min-height: 100%;
}
#top {
    height: auto;
    width: 100%;
    background-color: #FFFFFF;
    border-top: 10px solid #000000;
}
#top img {
    height: 230px;
    width: 250px;
    margin: 30px 0 10px 50px;
}
.top_phone {
    background-color: #DC143C;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 280px;
    height: 170px;
    float: right;
    margin: -10px 70px 10px 0;
    padding-top: 20px;
    color: #FFFFFF;
    text-align: center;
    font-size: 18px;
}
.menu{
    color: #FFFFFF;
}
.menu table{
    border-collapse: collapse;
    width: 100%;
}
.menu table td{
    background: linear-gradient(to bottom, #696969, #000000);
    text-align: center;
    padding: 15px 0;
    border-right: 1px solid #000000;
    font-weight: bold;
}
.menu table td:last-child {
    border-right: none;
}
.menu td:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
.menu table a{
    text-decoration: none;
    color: #FFFFFF;
}
#main_text {
    background-color: #fe860c;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
}   
#main_text p {
    font-size: 15px;
    margin-left: 20px;
}
.line {
    border-top: 1px dashed #000000;
    width: 95%;
    height: 18px;
    margin: auto;
}
.block div {
    margin-left: 30px;
}
.block a {
    text-decoration: none;
    color: #FFFFFF;
}
.first, .second, .third, .fourth{
    float: left;
    margin-bottom: 18px
}
.fifth{
    float: left;
    clear: both;
}
.six, .seventh, .eighth {
    float: left;
}
.vivoz_othodov_head, .stroi_musor_head, .krupnii_musor_head,
.snow_head, .container_musor_head, .pogruzka_head,
.bunkerovoz_head, .tbo_head {
    width: 210px;
    height: auto;
    background: #000000;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 17px;
}
.vivoz_othodov, .stroi_musor, .krupnii_musor, .snow,
.container_musor, .pogruzka, .bunkerovoz, .tbo {
    width: 240px;
    height: auto;
    text-align: justify;
    font-size: 15px;
}
.vivoz_othodov_head:hover, .stroi_musor_head:hover,
.krupnii_musor_head:hover, .snow_head:hover,
.container_musor_head:hover, .pogruzka_head:hover,
.bunkerovoz_head:hover, .tbo_head:hover {
    background: #DC143C;
    color:#FFFFFF;
    background: linear-gradient(to bottom, #FF0000, #DC143C);
}
#footer {
    background-color: #000000;
    width: 100%;
    height: 120px;
    position: relative;
    bottom: 0;
    margin-top: -120px;
    font-size: 15px;
}
.hFooter {  
    clear: both;  
    height: 120px;
}
#footer table {
    width: 100%;
    text-align: center;
    padding-top: 60px;
    color: #FFFFFF;
    border-top: 10px solid #FFFFFF;
}
#footer table a{
    text-decoration: none;
    color: #FFFFFF;
}

@aj17 · 22.05.2015, 13:03

Приложите пояснительный скриншот, не совсем понятно какой результат должен быть.

@Svetlana_123 · 22.05.2015, 14:51 **[ТС]**

Разъезжаются блоки div при масштабировании

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

@aj17 · 22.05.2015, 15:30

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
 
body{background: #FE860C;}
.one{font-size: 0;}
.one .item{
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin-bottom: 20px;
    padding: 0px 20px;
}
.one .title{
    background: #000000;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 17px;
}
 
.one .item p{
    text-align: justify;
    font-size: 15px;
}
</style>
<body>
    <div class="one">
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
        
        <div class="item">
            <div class="title">Вывоз мусора и отходов</div>
            <p>
                Вы обращаетесь по адресу, если вас интересует 
                вывоз бытового твердого мусора, его утилизация и 
                захоронение, а также вывоз и ликвидация различных 
                отходов с рынков и торговых площадей, жилых домов и 
                предприятий, поселков и любых других мест.
            </p>
        </div>
    </div>
</body>
</html>

может вам стоит обратить внимание на резиновый вариант сеточки?

По вашему случаю, необходимо заменить float на display: inline-block;

@Svetlana_123 · 22.05.2015, 17:49 **[ТС]**

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

@aj17 · 22.05.2015, 18:02

Посмотрите мой пример, я сделал его максимально простым и наглядным. Суть в том, что вся ширина по умолчанию, если мы её не задаем явно, является 100%, каждый из блоков я сделал 25% и прописал им display: inline-block; , то есть расположил их горизонтально) И того получаем, что в зависимости от ширины, наши блоки то расширяются, то сужаются (резиновые)

@Svetlana_123 · 22.05.2015, 18:37 **[ТС]**

Здорово, переварю, разберусь и попробую сделать ))))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	22.05.2015, 13:03
	Приложите пояснительный скриншот, не совсем понятно какой результат должен быть. 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	22.05.2015, 14:51 [ТС]
	на первом видно как выглядит на 19 дюймовом мониторе, на втором как блоки съезжают при уменьшении окна браузера, тоже самое при увеличении шрифта или на большем мониторе. Должны вставать шесть в два ряда по три и два на третий ряд. 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	22.05.2015, 17:49 [ТС]
	Спасибо за помощь, может и стоит, но пока не знаю что и как делать, это первые попытки сделать сайт. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	22.05.2015, 18:02
	Посмотрите мой пример, я сделал его максимально простым и наглядным. Суть в том, что вся ширина по умолчанию, если мы её не задаем явно, является 100%, каждый из блоков я сделал 25% и прописал им display: inline-block; , то есть расположил их горизонтально) И того получаем, что в зависимости от ширины, наши блоки то расширяются, то сужаются (резиновые) 0

@Svetlana_123 0 / 0 / 0 Регистрация: 22.05.2015 Сообщений: 120
	22.05.2015, 18:37 [ТС]
	Здорово, переварю, разберусь и попробую сделать )))) 0