При добавлении формы слетает верстка сайта

@drmind · Регистрация: 19.07.2015

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

Добрый день!
Пытаюсь доверстать свою первую страницу и внезапно добавление форм стало большой проблемой: как только она добавляется, сразу начинают распадаться дивы, идущие после неё, и, что самое странное, она повлияла на отображение блока head-container, который к ней вообще никак не относится. По задумке после шапки страницы должно быть в ряд 3 прямоугольных окошка с заголовком, картинкой и поисковой строкой. Как только вставил <form></form> в эти прямоугольники - всё разлетелось так, что не могу понять что на что влияет. Помогите разобраться в чём дело

HTML:

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
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main-css.css">
    </head>
    <body>
        <div class="head-container">
            <div class="columner">
                <div class="logo"></div>
                <div class="name"></div>
                <div class="buttons">
                    <div class="home"><a href="#Home">Home</a></div>
                    <div class="about"><a href="#About">About</a></div>
                    <div class="contacts"><a href="#Contacts">Contacts</a></div>
                    <div class="some-text">text</div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="columner">
                <div class="window-1">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/shopping.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-2"></div>
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/food.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-3">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/disco.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
            </div>
        </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
body{
    padding:0;
    margin:0;
}
.head-container,
.logo,
.buttons,
.name{
    border:1px solid yellow;
}
.head-container{
    background-color:#64276E;
    height:250px;
}
.columner{
    width:70%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid yellow;
}
.logo,
.buttons,
.name{
    display:inline-block;
}
.logo{
    width:200px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/radar.png');
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:200px;
}
.name{
    width:400px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/name.png');
    background-repeat:no-repeat;
    background-position:-20px 50%;
    background-size:250px;
}
.buttons{
    height:200px;
    width:280px;
    float:right;
    margin:20px 0 0 0;
}
.home,
.about,
.contacts{
    display:inline-block;
    margin-right:10px;
}
.home a,
.about a,
.contacts a{
    display:block;
    height:80px;
    width:80px;
    border-radius:40px;
    background-color:#6CECA4;
    text-align:center;
    text-decoration:none;
    color:#64276E;
    line-height:80px;
}
.home a:hover{
    background-color:#00E3B8;
}
.about a:hover{
    background-color:#00E3B8;
}
.contacts a:hover{
    background-color:#00E3B8;
}
.some-text{
    font-size:1.2em;
    font-family:arial;
    height:100px;
    padding-top:50px;
    color:white;
    text-align:left;
}
.window-1,
.window-2,
.window-3{
    display:inline-block;
    height:350px;
    width:30%;
    background-color:#00FF6F;
    border-radius:10px;
    border:0px solid #00FF6F;
    margin-top:20px;
}
.window-2{
    margin-left:4.5%;
}
.window-3{
    float:right;
}
 
.search-form{
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
}
.search-form  input[type="text"]{
    margin-top:20px;
    margin-left:30px;
    margin-right:auto;
}
.text-block{
    text-align:center;
    color:#64276E;
    font-size:30px;
    font-weight:bold;
    margin-bottom:20px;
}

@Jho · 19.07.2015, 22:59

А попробуй div-ы и картинки вытащить за пределы <form>

@drmind · 20.07.2015, 09:00 **[ТС]**

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

А попробуй div-ы и картинки вытащить за пределы <form>

Не помогает. Вообще не реагирует. И если форму обернуть в дополнительный див - тоже не помогает.

@Poiz0N · 20.07.2015, 09:13

у Вас div который на window2 не оборачивает форму, может из-за этого?

@Sn1p3rOk · 20.07.2015, 09:19

Устранил проблему.

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
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main-css.css">
    </head>
    <body>
        <div class="head-container">
            <div class="columner">
                <div class="logo"></div>
                <div class="name"></div>
                <div class="buttons">
                    <div class="home"><a href="#Home">Home</a></div>
                    <div class="about"><a href="#About">About</a></div>
                    <div class="contacts"><a href="#Contacts">Contacts</a></div>
                    <div class="some-text">text</div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="columner">
                <div class="window-1">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/shopping.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-2">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/food.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-3">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">text</div>
                        <img src="img/disco.png" width="200px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Добавлено через 3 минуты
Собственно в чем проблема...

HTML5
1
2
3
4
5
6
7
<div class="window-2"></div> <!-- Пустой блок, в нём должна быть форма -->
<form class="search-form" action="index.php" method="post">
    <div class="text-block">text</div>
    <img src="img/food.png" width="200px" align="middle" hspace="20px">
    <input type="text" name="search" value="Search...">
</form>
</div> <!-- Из-за этого ошибка, закрытие тега есть, а открытия - нет -->

@drmind · 20.07.2015, 11:07 **[ТС]**

Спасибо! И правда, я не заметил, буду внимательней. А из-за чего выезжает из head-container блок с кнопками? Если убрать из дивов формы - он заезжает обратно. Какое отношение вообще могут иметь формы к блоку с кнопками? Их ведь роднит только общий тег <body>...

@Sn1p3rOk · 20.07.2015, 19:07

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

А из-за чего выезжает из head-container блок с кнопками?

С чего вы взяли, что блок выезжает?

@drmind · 20.07.2015, 20:57 **[ТС]**

Странно, у Вас не выезжает?
На всякий случай исправленные html и css. И скрин выезда.

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
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main-css.css">
    </head>
    <body>
        <div class="head-container">
            <div class="columner">
                <div class="logo"></div>
                <div class="name"></div>
                <div class="buttons">
                    <div class="home"><a href="#Home">Home</a></div>
                    <div class="about"><a href="#About">About</a></div>
                    <div class="contacts"><a href="#Contacts">Contacts</a></div>
                    <div class="some-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="columner">
                <div class="window-1">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Shopping</div>
                        <img src="img/shopping.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-2">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Food</div>
                        <img src="img/food.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-3">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Fun</div>
                        <img src="img/smile.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
            </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
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
body{
    padding:0;
    margin:0;
}
.head-container,
.logo,
.buttons,
.name{
    border:1px solid yellow;
}
.head-container{
    background-color:#64276E;
    height:250px;
}
.columner{
    max-width:900px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid yellow;
}
.logo,
.buttons,
.name{
    display:inline-block;
}
.logo{
    width:200px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/radar.png');
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:200px;
}
.name{
    width:400px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/name.png');
    background-repeat:no-repeat;
    background-position:-20px 50%;
    background-size:250px;
}
.buttons{
    height:200px;
    width:270px;
    float:right;
    margin:20px 0 0 0;
}
.home,
.about{
    display:inline-block;
    margin-right:10px;
}
.contacts{
    display:inline-block;
    margin-right:0px;
}
.home a,
.about a,
.contacts a{
    display:block;
    height:80px;
    width:80px;
    border-radius:40px;
    background-color:#00FF6F;
    text-align:center;
    text-decoration:none;
    color:#64276E;
    line-height:80px;
}
.home a:hover{
    background-color:#00E3B8;
}
.about a:hover{
    background-color:#00E3B8;
}
.contacts a:hover{
    background-color:#00E3B8;
}
.some-text{
    font-size:1.2em;
    font-family:arial;
    height:100px;
    padding-top:20px;
    color:white;
    text-align:left;
}
.window-1,
.window-2,
.window-3{
    display:inline-block;
    height:350px;
    width:30%;
    background-color:#00FF6F;
    border-radius:10px;
    border:0px solid #00FF6F;
    margin-top:20px;
}
.window-2{
    margin-left:4.5%;
}
.window-3{
    float:right;
}
.search-form{
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
}
.search-form  input[type="text"]{
    margin-top:20px;
    margin-left:35px;
    margin-right:auto;
}
.text-block{
    text-align:center;
    color:#64276E;
    font-size:30px;
    font-weight:bold;
    margin-bottom:20px;
}

@Sn1p3rOk · 20.07.2015, 21:06

Это из-за margin: 20px 0 0 0;
Блока не влазит просто.
Поставь меньше, например 18px и т.д.

@drmind · 20.07.2015, 22:03 **[ТС]**

margin: 20px 0 0 0; даёт отступ только сверху. Даже если его обнулить, то ничего не меняется. НО! - если закомментировать формы - то всё встаёт на свои места. Но мне они нужны =)

@Sn1p3rOk · 20.07.2015, 22:44

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

margin: 20px 0 0 0; даёт отступ только сверху.

Не это имел ввиду. Это из-за отступов, по этому не помещается блок.

Добавлено через 13 минут
После вставки какой формы сбивается шапка? и ты clear писал?

@drmind · 21.07.2015, 12:19 **[ТС]**

После вставки какой формы сбивается шапка? и ты clear писал?

Надо убрать все формы - тогда html выравнивается (я их закомментировал). Clear не писал, хотя сейчас сижу экспериментирую - пока безрезультатно.

Понятно, что я где-то накосячил. Но совершенно не понимаю что вызывает такой эффект.

@Fedor92 · 21.07.2015, 13:11

drmind, сделайте небольшой тест... Уберите картинки из форм и посмотрите уместятся ли формы без картинок... Если уместились по одной добавляйте картинки, затем посмотрите не увеличивается ли ширина формы при добавлении картинки... Увеличивается? Если увеличивается стоит подумать для чего Вам понадобилось свойство: hspace="20px" прописаное для img внутренним стилем...

@drmind · 22.07.2015, 09:31 **[ТС]**

Всё перепробовал.
Картинки удалял, clearfix использовал на всех родительских блоках, паддинги и маргины менял до 0 - помогает только удаление форм из блоков. Не знаю что еще сделать...

@Fedor92 · 22.07.2015, 11:39

drmind, у меня, например, формы без картинок прекрасно умещаются...

При добавлении формы слетает верстка сайта

Причём во всех броузерах...Даже ie...

@drmind · 22.07.2015, 12:18 **[ТС]**

drmind, у меня, например, формы без картинок прекрасно умещаются...
Вложение 556408
Причём во всех броузерах...Даже ie...

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

Я понимаю, что так оставлять нельзя, но, по крайней мере, теперь знаю, что всё не так плохо как казалось. Убил 3 дня...

@Fedor92 · 22.07.2015, 12:25

drmind, я немножко код подправил...

Кликните здесь для просмотра всего текста

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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main-css.css">
    </head>
    <style>
    html,body{
    width:100%;
    height:100%;
    margin:0;
}
.head-container,
.logo,
.buttons,
.name{
    border:1px solid yellow;
}
.head-container{
    background-color:#64276E;
    height:250px;
}
.columner{
    max-width:900px;
    height:100%;
    margin:0 auto;
    border:1px solid yellow;
}
.logo,
.buttons,
.name{
    display:inline-block;
}
.logo{
    width:200px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/radar.png');
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:200px;
}
.name{
    width:400px;
    height:200px;
    margin:20px 0 0 0;
    background-image:url('img/name.png');
    background-repeat:no-repeat;
    background-position:-20px 50%;
    background-size:250px;
}
.buttons{
    height:200px;
    width:270px;
    float:right;
    margin:20px 0 0 0;
}
.home,
.about{
    display:inline-block;
    margin-right:10px;
}
.contacts{
    display:inline-block;
    margin-right:0px;
}
.home a,
.about a,
.contacts a{
    display:block;
    height:80px;
    width:80px;
    border-radius:40px;
    background-color:#00FF6F;
    text-align:center;
    text-decoration:none;
    color:#64276E;
    line-height:80px;
}
.home a:hover{
    background-color:#00E3B8;
}
.about a:hover{
    background-color:#00E3B8;
}
.contacts a:hover{
    background-color:#00E3B8;
}
.some-text{
    font-size:1.2em;
    font-family:arial;
    height:100px;
    padding-top:20px;
    color:white;
    text-align:left;
}
.window-1,
.window-2,
.window-3{
    display:inline-block;
    height:350px;
    width:30%;
    background-color:#00FF6F;
    border-radius:10px;
    border:0px solid #00FF6F;
    margin-top:20px;
}
.window-2{
    margin-left:4.5%;
}
.window-3{
    float:right;
}
.search-form{
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
}
.search-form  input[type="text"]{
    margin-top:20px;
    margin-left:35px;
    margin-right:auto;
}
.text-block{
    text-align:center;
    color:#64276E;
    font-size:30px;
    font-weight:bold;
    margin-bottom:20px;
}
    </style>
    <body>
        <div class="head-container">
            <div class="columner">
                <div class="logo"></div>
                <div class="name"></div>
                <div class="buttons">
                    <div class="home"><a href="#Home">Home</a></div>
                    <div class="about"><a href="#About">About</a></div>
                    <div class="contacts"><a href="#Contacts">Contacts</a></div>
                    <div class="some-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="columner">
                <div class="window-1">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Shopping</div>
                        <img src="img/shopping.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-2">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Food</div>
                        <img src="img/food.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
                <div class="window-3">
                    <form class="search-form" action="index.php" method="post">
                        <div class="text-block">Fun</div>
                        <img src="img/smile.png" width="190px" align="middle" hspace="20px">
                        <input type="text" name="search" value="Search...">
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

У меня хром замечательно прожевал - скрин в предыдущем посту... И подумайте над hspace, как можно заменить... Если не получится, что-нибудь придумаем...

@drmind · 22.07.2015, 13:07 **[ТС]**

У вас CSS и HTML в одном файле, а у меня CSS отдельно. Когда я запустил ваш файл - всё работает идеально. Когда разбил ваш код на 2 отдельных файла - хром снова захромал. Причём сразу он может открыть нормально, но если обновить страницу 2-3 раза - всё расползается.

@Fedor92 · 22.07.2015, 19:01

Кое - что накидал... test2.rar

@drmind · 23.07.2015, 12:15 **[ТС]**

Класс! Работает!

Вы добавили свойство type="text/css" и зафлоатили window-1 и 2. Интересно. Поэкспериментирую дома на что это влияет.

Спасибо огромное!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. 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. Программа предоставляет более. . .

При добавлении формы слетает верстка сайта

Решение

Решение

@Jho 9 / 9 / 5 Регистрация: 16.04.2015 Сообщений: 53
	19.07.2015, 22:59
	А попробуй div-ы и картинки вытащить за пределы <form> 0

@Poiz0N 5 / 5 / 2 Регистрация: 13.02.2013 Сообщений: 76
	20.07.2015, 09:13
	у Вас div который на window2 не оборачивает форму, может из-за этого? 1

@drmind 0 / 0 / 1 Регистрация: 19.07.2015 Сообщений: 67
	20.07.2015, 11:07 [ТС]
	Спасибо! И правда, я не заметил, буду внимательней. А из-за чего выезжает из head-container блок с кнопками? Если убрать из дивов формы - он заезжает обратно. Какое отношение вообще могут иметь формы к блоку с кнопками? Их ведь роднит только общий тег <body>... 0

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	20.07.2015, 21:06
	Это из-за margin: 20px 0 0 0; Блока не влазит просто. Поставь меньше, например 18px и т.д. 0

@drmind 0 / 0 / 1 Регистрация: 19.07.2015 Сообщений: 67
	20.07.2015, 22:03 [ТС]
	margin: 20px 0 0 0; даёт отступ только сверху. Даже если его обнулить, то ничего не меняется. НО! - если закомментировать формы - то всё встаёт на свои места. Но мне они нужны =) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	21.07.2015, 13:11
	drmind, сделайте небольшой тест... Уберите картинки из форм и посмотрите уместятся ли формы без картинок... Если уместились по одной добавляйте картинки, затем посмотрите не увеличивается ли ширина формы при добавлении картинки... Увеличивается? Если увеличивается стоит подумать для чего Вам понадобилось свойство: hspace="20px" прописаное для img внутренним стилем... 0

@drmind 0 / 0 / 1 Регистрация: 19.07.2015 Сообщений: 67
	22.07.2015, 09:31 [ТС]
	Всё перепробовал. Картинки удалял, clearfix использовал на всех родительских блоках, паддинги и маргины менял до 0 - помогает только удаление форм из блоков. Не знаю что еще сделать... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.07.2015, 11:39
	Сообщение было отмечено drmind как решение Решение drmind, у меня, например, формы без картинок прекрасно умещаются... Причём во всех броузерах...Даже ie... 1

@drmind 0 / 0 / 1 Регистрация: 19.07.2015 Сообщений: 67
	22.07.2015, 13:07 [ТС]
	У вас CSS и HTML в одном файле, а у меня CSS отдельно. Когда я запустил ваш файл - всё работает идеально. Когда разбил ваш код на 2 отдельных файла - хром снова захромал. Причём сразу он может открыть нормально, но если обновить страницу 2-3 раза - всё расползается. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	22.07.2015, 19:01
	Сообщение было отмечено drmind как решение Решение Кое - что накидал... test2.rar 0

@drmind 0 / 0 / 1 Регистрация: 19.07.2015 Сообщений: 67
	23.07.2015, 12:15 [ТС]
	Класс! Работает! Вы добавили свойство type="text/css" и зафлоатили window-1 и 2. Интересно. Поэкспериментирую дома на что это влияет. Спасибо огромное! 0