Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Правая колонка уезжает вниз. Не могу разобраться почему

Помогите начинающему верстальщику. Не могу понять почему правая колонка уезжает вниз. Вот здесь код: .
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
<header class="header">
        <div class="logo">
        </div>
        <div class="vvedenie">Женский сайт "Дни моды" приветствует всех своих читательниц! Этот женский сайт - для вас, если вы хотите узнать что-то новое, получить совет или просто высказаться в комментариях. И конечно же, у нашего женского сайта 
есть рассылки, благодаря которым вы всегда будете в курсе наших обновлений! Дни Моды: небанальный 
женский сайт обо всем, что интересует современницу
        </div>
        <div class="menu">
            <nav class="topmenu">
                <ul class="mainmenu">
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Красота и здоровье</a></li>
                    <li><a href="#">Мода и стиль</a></li>
                    <li><a href="#">Дом и быт</a></li>
                    <li><a href="#">Отношения</a></li>
                    <li><a href="#">Дети</a></li>
                    <li><a href="#">Общество</a></li>
                </ul>
            </nav>
            <form class="form" action="/search">
                <input name="find" value="" placeholder="Поиск" id="find">
                <input type="image" src="images/find.png" alt="Найти" name="search" id="search">
            </form>
        </div>
    </header>
    <div class="main-container">
        <aside class="leftcolumn">
            <nav class="leftmenu">
                <h2>Навигация по сайту</h2>
                <ul class="leftmenuUl">
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                    <li><a href="#">Беременность</a><li>
                </ul>
            </nav>
            <div class="blok leftblok">
                <h2>Новые статьи</h2>
                <ul>
                    <li class="s1"><a href="#">Статья 1</a></li>
                    <li class="s2"><a href="#">Статья 2</a></li>
                    <li class="s3"><a href="#">Статья 3</a></li>
                    <li class="s4"><a href="#">Статья 4</a></li>
                </ul>
            </div>
        </aside>
        <section class="centerblok">
            <div class="mainflashbanner">
            </div>
            <div class="content1">
                <section class="content leftsection">
                    <h2>Мода и стиль</h2>
                    <div class="line2"></div>
                    <div class="mainnews">
                        <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                    <div class="mainnews">
                        <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                </section>
                <section class="content rightsection">
                    <h2>Здоровье</h2>
                    <div class="line2"></div>
                    <div class="mainnews">
                        <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                    <div class="mainnews">
                        <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                </section>
            </div> <!-- Конец первого блока основного содержания (content1) -->
            <section class="content bottomsection">
                <h2>Здоровье</h2>
                <div class="line2"></div>
                <div class="mainnews">
                    <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                    <div class="anons">
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                </div>
                <div class="mainnews">
                    <div class="postFoto"><a href="#"><img height="114" width="186" src="images/foto.png"></a></div>
                    <div class="anons">
                        <h3><a href="#">Конкурс близится к финалу</a></h3>
                        <p>31 января будут подведены итоги конкурса от Натальи Водяновой и бренда Centro. Для участия в конкурсе необходимо создать образ с обувью из коллекции "Сказка"</p>
                    </div>
                </div>
            </section>
        </section>
        <aside class="rightcolumn">
            <div class="blok right-top-blok">
                <h2>Новости</h2>
                <ul>
                    <li class="s1"><a href="#">Статья 1</a></li>
                    <li class="s2"><a href="#">Статья 2</a></li>
                    <li class="s3"><a href="#">Статья 3</a></li>
                    <li class="s4"><a href="#">Статья 4</a></li>
                </ul>
            </div>
            <div class="sideflashbanner">
            </div>
            <div class="blok right-bottom-blok">
                <h2>Ты, он и любовь</h2>
                <ul>
                    <li class="s1"><a href="#">Статья 1</a></li>
                    <li class="s2"><a href="#">Статья 2</a></li>
                    <li class="s3"><a href="#">Статья 3</a></li>
                    <li class="s4"><a href="#">Статья 4</a></li>
                </ul>
            </div>
        </aside>
    </div>
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
* {
    margin: 0;
    padding: 0;
}
 
body {
    font-family: Tahoma, Arial, Verdana;
}
 
ul {
    list-style: none;
}
 
/* Шапка сайта */
.header {
    max-width: 900px;
    height: 113px;
    margin: 0 auto;
    padding-top: 20px;
    border: 0px solid #000;
    position: relative;
}
 
.logo,
.vvedenie {
    float: left;
}
 
.logo {
    background: url(images/logo.png) left top no-repeat;
    width: 300px;
    height: 52px;
}
 
.vvedenie {
    width: 556px;
    height: 52px;
    border: 0px solid green;
    padding-left: 44px;
    font-family: Tahoma, Arial, Verdana;
    font-size: 11px;
    color: #9b9fa0;
}
 
/* Ссылки верхнего и нижнего меню */
 
.topmenu ul li a,
.bottom-menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
}
 
.topmenu ul li a:hover,
.bottom-menu ul li a:hover {
    text-decoration: none;
}
 
.topmenu ul li,
.bottom-menu ul li {
    float: left;
}
 
/* Блок с верхним меню и поиском */
.menu {
    position: absolute;
    bottom: 11px;
    width: 100%;
    height: 39px;
    background: linear-gradient(to top, #e0406e, #f1789a);
    background: -webkit-linear-gradient(to top, #e0406e, #f1789a);
    background: -o-linear-gradient(to top, #e0406e, #f1789a);
    background: -moz-linear-gradient(to top, #e0406e, #f1789a);
    border-radius: 14px;
    border: 0px solid #000;
}
 
/* Меню верхнее */
.topmenu {
    margin: 12px auto auto 2px;
}
 
.mainmenu li {
    padding: 0 11px;
    background: url(images/line.png) center right no-repeat;
    font-size: 11.5px;
    font-family: HelveticaNeueCyr , Helvetica;
    font-weight: 500;
}
 
.mainmenu li:last-child {
    background: none;
}
 
.topmenu ul li a {
    color: white;
}
 
/*  Поиск */
.form {
    position: absolute;
    right: 13px;
    top: 9px;
}
 
#find {
    width: 203px;
    height: 21px;
    border: 1px solid #c33356;
    border-radius: 10px;
    font-style: oblique;
    font-size: 11px
}
 
#search {
    background: url(images/find.png) no-repeat;
    position: absolute;
    right: 8px;
    top: 5px;
}
 
/* Основная часть сайта */
 
.main-container {
    margin: 0 auto;
    border: 0px solid #000;
    width: 900px;
    height: auto !important;
}
 
.leftcolumn,
.centerblok,
.righrtcolumn {
    float: left;
    border: 0px;
}
 
.leftcolumn,
.rightcolumn {
    width: 200px;
    height: auto;
    border: 0 solid #c33356;
    box-sizing: border-box;
}
 
.leftmenu,
.blok {
    background: #f5f6f8;
    
}
 
.leftmenu h2,
.blok h2 {
    text-transform: uppercase;
    font-size: 12px;
    color: #9b6a80;
    padding: 12px 0 6px 14px;
    font-family: "HelveticaNeueCyr Roman" , Helvetica, Tahoma, Arial, Verdana;
    font-weight: normal;
}
 
/* Меню слева */
 
.leftmenuUl{
    text-transform: uppercase;
    padding: 6px;
    font-size: 11px;
    color: #9b6a80;
}
 
.leftmenuUl li {
    padding: 2px 0;
}
 
.leftmenuUl li a {
    color: #77b0c4;
    display: block;
    padding: 3px 8px;
    }
 
.leftmenuUl li a:hover{
    color: white;
    background: #e0406e;
    background: linear-gradient(to top, #e0406e, #faa7a5);
    background: -webkit-linear-gradient(to top, #e0406e, #faa7a5);
    background: -o-linear-gradient(to top, #e0406e, #faa7a5);
    background: -moz-linear-gradient(to top, #e0406e, #faa7a5);
    border-radius: 5px;
    text-decoration: none;
}
 
/* Блоки статей */
 
.blok {
    font-size: 11px;
    border: 0px solid #000;
}
 
.blok .s1,
.blok .s2,
.blok .s3,
.blok .s4 {
    background-size: auto 44px;
    padding: 1px 0 1px 77px;
    min-height: 45px;
    margin: 12px 0px 18px 14px;
    max-width: 186px;
    box-sizing: border-box;
}
 
.blok .s1 a,
.blok .s2 a,
.blok .s3 a,
.blok .s4 a {
    color: #77b0c4;
}
 
.blok .s1 a:hover,
.blok .s2 a:hover,
.blok .s3 a:hover,
.blok .s4 a:hover {
    color: #9b6a80;
    text-decoration: none;
}
 
/* Левый блок статей*/
 
.leftblok {
    margin-top: 21px;
}
 
.leftblok .s1 {
    background: url(images/s1.png) top left no-repeat;
}
 
.leftblok .s2 {
    background: url(images/s2.png) top left no-repeat;
}
 
.leftblok .s3 {
    background: url(images/s3.png) top left no-repeat;
}
 
.leftblok .s4 {
    background: url(images/s4.png) top left no-repeat;
}
 
/* центральная часть */
 
.centerblok {
    padding: 0 9px;
    border: 0px solid #000;
    box-sizing: border-box;
}
 
/* анимированный баннер */
 
.mainflashbanner {
    width: 482px;
    height: 286px;
    border-radius: 10px;
    background: #f5f6f8;
    border: 0;
}
 
/* Блоки с основным содержанием */
.content1,
.bottomsection {
    width: 482px;
    border: 0px solid #000;
}
 
.content h2 {
    color: #603e4e;
    font-size: 14px;
    font-family: "HelveticaNeueCyr Roman" , Helvetica, Tahoma, Arial, Verdana;
}
 
.content .line2 {
    height: 1px;
    background: url(images/line2.png) repeat-x;
    margin: 10px 0;
}
 
.content h3 {
    font-size: 14px;
    margin: 14px 0;
}
 
.content h3 a{
    color: #946579;
}
 
.content {
    color: #9b9fa0;
    font-size: 11px;
}
 
.leftsection {
    width: 223px;
    float: left;
}
 
.rightsection {
    width: 223px;
    float: right;
}
 
.leftsection .postFoto,
.rightsection .postFoto{
    margin: 0 16px;
}
 
.leftsection .mainnews,
.rightsection .mainnews {
    margin-bottom: 25px;
}
 
/* Нижний блок с основным содержанием */
 
.bottomsection .mainnews {
    margin-bottom: 14px;
    float: left;
}
 
.bottomsection .mainnews .postFoto,
.bottomsection .mainnews .anons {
    float: left;
}
 
.bottomsection .mainnews .anons {
    margin-left: 8px;
    border: 0px solid #000;
    width: 286px;
}
 
.bottomsection .mainnews h3 {
    margin-top: 0;
}
Ответ: прописано "float: left", а блок всё равно внизу. Там видимо что-то с шириной блоков. Я не могу понять, что именно. вроде математически всё должно входить в 900px, а факту не входит.

Добавлено через 6 минут
точно, там опечатка была, спасибо большое
Вопрос: Правая колонка уезжает вниз

Друзья!
Ничего не могу поделать, бьюсь над этим уже 3 часа! Права колонка всегда уезжает вниз и всё тут! ! Помогите решить эту проблему, пожалуйста.

style.css
body {
margin: 0;
padding: 0;
background: #fff url(images/fon.jpg) repeat;
font-size: 12px;
color: #d1d5d8;
font-family: Verdana, Arial, sans-serif;
font-style: normal;
letter-spacing: 1px;
}
a {
color: #d1d5d8;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}

header {
width: 1240px;
height: 120px;
margin: 0 auto;
}
#slogan {
margin: 0 auto;
padding: 30px 0 20px;
text-align: center;
line-height: 100%;
float: left;
}
#slogan h1 {
font-size: 30px;
}
#menu {
background: rgba(0,0,0,0.6);
margin: 20px 0px 0px;
}
nav {
margin: 0 auto;
padding: 10px 0px 10px;
width: 1250px;
}
nav a {
text-decoration: none;
display: inline-block;
padding: 10px;
}
nav a:hover {
color: #e53400;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 0 10px 0;
border-right: 2px solid #c7cccf;
position: relative;
}

nav ul li:hover {
background: #1d1d1d;
}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: absolute;
top: 40px;
left: 0px;
}
nav ul li ul li {
display: block;
text-align: left;
border: none;
background: #000;
padding: 0 20px 0;
}
nav ul li ul li a {
display: inline-block;
padding: 10px;
}
nav ul li ul li a:hover{
color: #e53400;
background: #1d1d1d;
}
.menu_text {
height: 20px;
padding: 10px 20px 10px;
}
main {
margin: 0 auto 20px;
padding: 20px;
overflow: hidden;
width: 1240px;
}
#left-column {
float: left;
width: 900px;
}
.content {
background: rgba(0,0,0,0.3);
float: left;
width: 900px;
margin: 20px 20px 10px 0;
padding: 20px;
}
.content:hover {
background: rgba(0,0,0,0.5);
}

#listing a {
color: #fff;
display: inline-block;
padding: 10px;
background: rgba(0,0,0,0.4);
}
#listing a:hover {
background: rgba(0,0,0,0.6);
}
#right-column {
float: left;
width: 240px;
padding: 20px;
margin: 0;
list-style: none;
background: rgba(0,0,0,0.3);
}
#right-column:hover {
background: rgba(0,0,0,0.5);
}

footer {
text-align: center;
background: rgba(255,255,255,0.5);
padding: 20px 0 20px;
margin: 0 auto;
width: 1240px;
}
footer:hover {
background: rgba(255,255,255,0.7);
}
/* время, ID, короткая ссылка и т.п. под каждым постом */
.additional {
width: 718px;
overflow: hidden;
font-size: 12px;
}
/* класс ссылки "Читать далее >>>" под каждой превией */
.more {
width: 718px;
text-align: center;
overflow: hidden;
}
.more a {
width: 718px;
background: rgba(0,0,0,0.4);
display: inline-block;
padding: 20px 0 20px;
color: #fff;
}
.more a:hover {
background: rgba(0,0,0,0.6);
}


index.html

<HTML>
<head>
<title>
Название</title>
<meta
charset="windows-1251">
<link
rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div
id="slogan">
<img
src="images/logo.png">
</div>
</header>
<div
id="menu">
<nav>
<ul>
<li><a
href="index.php">Главная</a></li>
<li
class="menu_text">Меню 1
<ul>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
</ul>
</li>
<li><a
href="">Меню 2</a></li>
<li><a
href="">Меню 3</a></li>
<li
class="menu_text">Меню 4
<ul>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
<li><a
href="">Ссылка</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<main>
<div
id="left-column>">
<div
class="content">
<h1>
Заголовок</h1>
<h2>
Заголовок 2</h2>
Текст <a href="">ссылка</a>
<br><img
src="raspberry-pi.jpg">
</div>
<div
class="content">
<h1>
Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
<div
class="content">
<h1>
Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
<div
class="content">
<h1>
Заголовок</h1>
Текст <a href="">ссылка</a>
</div>
</div>
<div
id="right-column">
<h2>
Название</h2>
Текст
</div>
</main>
<footer>

Подвал сайта
</footer>

</body>
</HTML>
Ответ: Kusss, спасибо огромное! Так и знал что проблема кроется в какой-то мелочи)))
Вопрос: Горизонтальное выравнивание левой и правой колонок на сайте

Люди, помогите пожалуйста снова новичку . Я продолжаю свле обучение и опять застрял : не понимаю почему левая колонка (свойство float: left отображается после элементов главной, а не параллельно, как правая колонка.

прикладываю свой сайт, скриншот, такж коды (фрагменты), мб может по ним будет понятно не скачивая сайта.

HTML5
1
2
3
<div class="left">
<p><a href="http://www.care2.com/click-to-donate/oceans/"><img src="http://www.cyberforum.ru/images/ocean.png" alt="click to donate - ocean - care2 project" id="ocean" target="_blank"></a></p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.left {float:left;
    width: 350px;
    margin: 10px;
    text-align: center;
 
}
 
#ocean {border-width: 3px;
    border-style: solid;
    border-color: white;
    padding: 0px;
    width: 300px;
    margin: 10px;
 
}
Ответ: Fedor92,

стили подключены правильно. Сегодня уже разобарлся, да, проблема была в том, что оказывается левая и права плавающие колонки (их код) должны идти перед кодом средней. Про кодировку и доткайп знаю, просто лень делать это в одном из многих тестовый сайтов.

спасибо за Ваши ответы.

(Тот блок не пустой, просто в версии сайта которую я вам отправил не было картинок и плеера который там располагался)
Вопрос: Сайт уезжает вниз в мобильной версии

Добрый день. У меня есть сайт на вордпрессе с натянутым шаблоном.
Есть такая проблема: сайт с ноутбука выглядит корректно, но в мобильной версии весь сайт уезжает вниз. Т.е. после открытия сайта с телефона, я вижу пустой экран с бэкграундом, а весь контент уже на экран ниже.
В данной области не особо силен, капаюсь четвертый день самостоятельно, но силы меня покидают.
Во вложения прикладываю 4 скриншота: 1) корректное отображение с ноута, 2) То, что мы видим, при открытии сайта с телефона, 3) Если немного покрутить вниз, 4) Если прокрутить вниз на весь экран (как должно быть по идее).
Прошу помощи.
Ответ: закрыто, создано в разделе фриланс.
Вопрос: Правый блок уходит вниз (float)

Добрый вечер, хочу сделать 3 блока, которые находятся на одном уровне, но правый блок уходит вниз (Может посоветуйте альтернативу? Или, пожалуйста, объясните, в чем проблема?):
Код (онлайн редактор):
Код:

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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Sergey</title>
</head>
 
<body>
<div id="top_div">
    
</div>
<div id="content">
    <div id="left_div">
 
        <div id="reg_div">
            
        </div>
        <div id="sch_div">
            
        </div>
    </div>
 
    <div id="main_div">
        <div id="sw_div">
            
        </div>
    </div>
 
    <div id="right_div">
        
    </div>
</div>
 
<div id="bottom_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
body{
    margin:auto;
    padding:0;
    width: 1000px;
    /*background: ;: url(image/background.jpg) no-repeat;*/
    background-color: #000;
    background-size: 100%;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
#top_div{
    width: 100%;
    height: 100px;
    background: #fff;
}
 
#content{
    overflow: hidden;
}
 
#left_div{
    background: #2fe;
    float: left;
    width: 200px;
    padding: 10px;
}
 
#reg_div{
 
}
 
#sch_div{
 
}
 
#main_div{
    background: #9ef;
    margin: 0px 250px 0px 250px;
    padding: 10px;
}
 
#sw_div{
    width: 200px;
    height: 200px;
    background: #f34;
}
 
#right_div{
    background: #e2f;
    float: right;
    width: 200px;
    padding: 10px;
}
 
#bottom_div{
 
}
Ответ: Serejka-Zloy, все верно, он у вас не убирается в дону строку со всеми блоками.
У центрального блока прописан margin: 0px 250px 0px 250px
Вопрос: правый блок съезжает вниз под блог контент

Помогите разобраться.
две колонки, одна контент, другая разная инфа.
пробовал прописать float для обоих колонок, колонку контент скукоживает.


index
CODE (html):

  1.  
  2. <?php
  3. include ('conf/connect_db.php');
  4. include ('conf/functions.php');
  5. if(!isset($_GET['page_id'])){
  6.    $page_id = '1';
  7. }
  8. else{
  9.    $page_id = addslashes(strip_tags(trim($_GET['page_id'])));
  10. }
  11. $page_data = GetDataArt($page_id);
  12. ?>
  13. <!doctype html>
  14. <html>
  15. <head>
  16. <meta charset="windows-1251">
  17. <title><?php echo $page_data[1]; ?></title>
  18. <meta name="description" content="<?php echo $page_data[3]; ?>" />
  19. <meta name="keywords" content="<?php echo $page_data[2]; ?>" />
  20. <script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
  21. <link href="all_styles.css" rel="stylesheet" type="text/css" media="screen">
  22.  
  23. </head>
  24.  
  25. <body>
  26. <div id="wrapper">
  27.  
  28. <div id="header"><a href="/"><img src="img/logo.png" width="350" height="50"></a></div>
  29. <div id="nav"><?php include('include/navigation.tpl'); ?></div>
  30. <div id="content">
  31.         <div id="page_designe"><?php echo $page_data[4]; ?></div>
  32. </div>
  33. <div id="right_col"><?php include('include/right_col.tpl'); ?></div>
  34. <div id="footer"><?php include('include/footer.tpl'); ?></div>
  35.  
  36. </div>
  37. </body>
  38. </html>


style
CODE (html):

  1.  
  2. * {
  3.         margin:0;
  4.         padding:0;
  5. }
  6. body {
  7.         width:100%;
  8.         background-color:#000;
  9.         font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
  10.         color:#FFF;
  11. }
  12. h1, h2, h3 {
  13.         text-align:center;
  14. }
  15.  
  16. /* main styles */
  17. #wrapper {
  18.         min-width:748px;
  19.         max-width:1320px;
  20.         margin:0 auto;
  21. }
  22. #header {
  23.         height:60px;
  24. }
  25. #content {
  26.         margin-right:220px;
  27.         max-width:1100px;
  28.         padding:0px;
  29.         text-align:center;
  30.         /*float:left;*/
  31. }
  32. #right_col {
  33.         width:220px;
  34.         padding:0px;
  35.         float:right;
  36. }
  37. #footer {
  38.         clear:both;
  39.         min-width:748px;
  40.         max-width:1320px;
  41.         height:105px;
  42.         line-height:100px;
  43.         padding:0 10px; /* Верхний-Нижний Левый-Правый */
  44. }
  45.  
  46. /* FOOTER STYLE */
  47. #footer_left_col {
  48.         float:left;
  49.         height:60px;
  50. }
  51. #footer_center_col {
  52.         float:left;
  53.         height:60px;
  54. }
  55. #footer_right_col {
  56.         float:right;
  57.         height:60px;
  58.         padding-left:5px;
  59. }
  60. /* END FOOTER STYLE */
  61.  
  62. /* /\/\/\/\/\ MENU /\/\/\/\/\ */
  63. #nav {
  64.         width:1200px;
  65.         height:60px;
  66.         font-family:PT Sans Narrow,sans-serif;
  67. }
  68. #navbar_main {
  69.         padding:5px;
  70.         list-style-type:none;
  71.         width:1200px;
  72.         height:60px;
  73.         line-height:50px;
  74.         text-align:center;
  75. }
  76. #navbar_main li {
  77.         display:inline;
  78. }
  79. #navbar_main a {
  80.         padding:0px 5px 0; /*верх, лево-право, низ*/
  81.         color:#FFF;
  82.         text-decoration:none;
  83.         font-weight:bold;
  84.         display:inline-block;
  85.         height:60px;
  86. }
  87. #navbar_main a:hover {
  88.         color:#CCC;
  89. }
  90. /* Page Designe */
  91. #page_designe {
  92.         max-width:1100px;
  93.         min-height:250px;
  94.         display: block;
  95.         background-color: #FFF;
  96.         color: #000;
  97.         text-align: justify;
  98. }
  99. /* END Page Designe */
  100.  
  101. /* ВИДЖЕТЫ */
  102. #vk_groups_desk {
  103.         margin:0 auto;
  104.         padding:0;
  105. }
  106.  
  107. /* END ВИДЖЕТЫ */
  108.  
  109.  

(Отредактировано автором: 07 Апреля, 2016 - 21:05:56)

Ответ:
чё никто не знает?
А я знаю, теперь.
нужно поменять местами
два блока
что бы было не так
CODE (html):

  1.  
  2. <div id="content">
  3.         <div id="page_designe"><?php echo $page_data[4]; ?></div>
  4. </div>
  5. <div id="right_col"><?php include('include/right_col.tpl'); ?></div>


А так
CODE (html):

  1.  
  2. <div id="right_col"><?php include('include/right_col.tpl'); ?></div>
  3. <div id="content">
  4.         <div id="page_designe"><?php echo $page_data[4]; ?></div>
  5. </div>
  6.  
  7.  
Вопрос: Позиционирование шапки и колонок

На больших экранах левая и правая колонка соединяется с хедером, а когда уменьшать - она лезет вниз. (Рисунок 2). Как эти колонки прикрепить к хедеру?

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
<header>
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="left-text">
                        <span>
развитие ребенка</span>
                    </div>
                </div>
                <div class="col-lg-2">
                    <a class="logo" href="#"><img src="img/logo.png" alt="logo"></a>
                </div>
                <div class="col-lg-4">
                    <div class="right-text">
                        <span>Антонимы - это слова с противоположным значением, однако объединены определенным общим фактором, например: высокий - низкий (рост), толстый - худой (телосложение) и др.</span>
                    </div>
                </div>
            </div>
            <div class="main-text">
                <h1>Антонимы</h1>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="left-colum"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nam. Distinctio ut consectetur consequatur optio autem impedit laboriosam illum quia esse, deserunt neque similique deleniti laudantium, molestias sequi itaque placeat, recusandae eligendi est, totam praesentium harum mollitia consequuntur earum. Vel repellat accusantium, quisquam est illo optio incidunt, accusamus ipsum provident atque eaque unde rem eos. Blanditiis libero saepe atque numquam odio, ducimus porro itaque perspiciatis iste molestias enim iusto voluptatibus impedit rem incidunt omnis! Quisquam cumque, dignissimos ea dolor voluptatibus illum, consectetur minima impedit eveniet, quos sapiente quibusdam dolore aut magni culpa beatae! Molestiae qui possimus ea, nesciunt reiciendis tempora!</span></div>
        <div class="main-content">
            <div class="top-content">
                <span>Раскрась попарно конфеты, на которых написаны антонимы.</span>
                <span>Для каждой пары используй отдельный цвет</span>
            </div>
            <div class="bottom-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil dolore tempore, tempora ipsam, nemo ratione explicabo commodi assumenda vero eaque quae in, dolorem cumque fugiat voluptatum minus reprehenderit facilis veritatis maiores ab enim qui temporibus unde incidunt? Omnis atque magni alias voluptas dolores illum expedita ab vel repellat accusamus, dolore iusto hic unde quisquam sunt optio. Quisquam, officiis odit. Neque nihil culpa eligendi vitae recusandae deserunt placeat corporis perferendis unde temporibus sed blanditiis ducimus, aliquid quaerat aperiam exercitationem architecto repellendus, repellat ea minus, iste maxime in! Possimus minus ducimus, nesciunt numquam laborum ab aut neque unde vitae fugit, voluptatum nihil!
            </div>
        </div>
        <div class="right-colum"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, nam. Distinctio ut consectetur consequatur optio autem impedit laboriosam illum quia esse, deserunt neque similique deleniti laudantium, molestias sequi itaque placeat, recusandae eligendi est, totam praesentium harum mollitia consequuntur earum. Vel repellat accusantium, quisquam est illo optio incidunt, accusamus ipsum provident atque eaque unde rem eos. Blanditiis libero saepe atque numquam odio, ducimus porro itaque perspiciatis iste molestias enim iusto voluptatibus impedit rem incidunt omnis! Quisquam cumque, dignissimos ea dolor voluptatibus illum, consectetur minima impedit eveniet, quos sapiente quibusdam dolore aut magni culpa beatae! Molestiae qui possimus ea, nesciunt reiciendis tempora!</span></div>
    </div>
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
header{
    background-image: url(../img/header-bg.png);
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    z-index: 2;
    padding-top: 50px;
    height: 462px;
}
 
.left-text{
    height: 100px;
    padding-left: 100px;
    padding-top: 30px;
    margin-top: 50px;
    background-image: url(../img/people-logo.png);
    background-repeat: no-repeat;
    -webkit-background-size: 125;
    background-size: 25%;
}
 
.left-text span{
    font-size: 25px;
    color: #096db7;
}
 
a.logo{
    display: block;
    width: 200px;
    height: 200px;
}
 
a.logo img{
    width: 100%;
}
 
.right-text{
    margin-left: 50px;
    max-width: 500px;
    margin-top: 50px;
}
 
.right-text span{
    font-weight: bold;
    font-size: 17px;
}
 
.main-text h1{
    font-size: 200px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}
 
.content{
    overflow: hidden;
    z-index: 1;
}
 
.main-content{
    height: 500px;
    width: 80%;
    float: left;
}
 
 
 
.left-colum, .right-colum{
    z-index: 1;
    display: block;
    width: 10%;
    height: 100%;
    background: linear-gradient(to bottom, #8ed2ca, #b0d35c);
    -webkit-background-size: 100%;
    background-size: 100%;
}
 
.left-colum{
    float: left;
}
 
.left-colum span, .right-colum span{
    color: transparent;
}
 
.right-colum{
    float: right;
    margin-bottom: -100px;
}
 Комментарий модератора 
Один вопрос - одна отдельная тема!
Ответ:
Сообщение от vitalya_831
<div class="content">
Может вам стоит создать правильную структуру страницы? Вы делаете на bootstrap? если да, то вам нужно этот блок тоже поместить в контейнер, добавить в него строку, и разместить все колонки по структуре заданной в
HTML5
1
header
Вопрос: Bootstrap 3: колонка по высоте родителя-row

Фреймворк bootstrap 3.
Имеется примерно следующая разметка:
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-4">
        ...
        </div>
        <div class="col-lg-9 col-md-9 col-sm-8">
        ...
        </div>
    </div>
</div>
Левая колонка имеет свое содержимое, правая - тоже. Иногда в правой колонке контент имеет большую высоту, иногда - меньшую, чем в левой.


Нужно, чтобы левая колонка всегда была по высоте родителя класса row, когда в ней внутренности по высоте меньше, чем в правой (т.е. чтобы левая и правая по высоте одинаковы были).

Помогите, пожалуйста

Добавлено через 9 часов 44 минуты
Знаю, что нужно покрутиться с display:table-cell; и float:none;, но не получается пока что. Не туда, наверно, ставлю.
Ответ: обеим колонкам display:table-cell, и задать ширину
а обертке этих колонок display:table (и опционально ширину)
Вопрос: Как настроить так чтоб правая колонка не убегала

Всем привет вот такая проблема. Делаю страницу при помощи HTML и CSS в HTML создал страницу разделил все на дивы как пологается (с лева сделал контент а с права разместил карту)теперь когда стилизую через CSS. При уменьшении окна браузера карта убегает вниз под текст. Как сделать так чтоб она оставалась на месте и появлялось окно прокрутки.
Ответ: Ураааа разобрался. Я кароч неправильно для контента не правильно минимальную ширину задавал поэтому карта скакала у меня!!!!
Вопрос: Выравнивание блоков в правой колонке сайта

Всем привет.

Не могу никак разобраться как выровнять все блоки по правую сторону.
Получается все блоки внизу вылезли в левую сторону...
Заранее благодарен.

Вот ссылка:
Ответ: Fedor92, я по другому представлял... Спасибо, уже не первый раз выручаете!