div верстка

05.09.2012, 21:42. **Показов** 2808. **Ответов** 4

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

Всем привет! В CSS пока вообще не секу почти.
Пишу сайт под MODX, возникла проблема.
С помощью div сделал, чтобы выводимая информация выводилась в виде "таблицы" 3 на N.
Чем больше N, тем длинее таблица получается, в итоге это всё тупо игнорит bot и footer и ложится поверх них.
Как избавится от этого? Как сделать, чтобы bot и footer тянулись вниз?
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
.wrapper{
margin: 0 auto;
text-align: left;
width: 100%;
min-width:1050px;
background:url(../images/bg.jpg) center top no-repeat;
background-color:#333333;
}
 
#stzp{
width: 800px;   
height: 100%;
margin: 0 auto;
}
 
#stSubzp{
width: 250px;  
height: 35px;  
float: left;
margin: 0 auto;
margin-left: 10px;
}
 
.footer{
bottom: 0px;
clear: both;
position: relative;
color:#999999; 
}
 
#bot{ 
position:relative;
left:50%;
margin-left:-300px;
text-align:left;
color: #c08202;
font-weight:600;
font-size: medium
}

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
<div class="wrapper">
    ## Этот кусок повторяется движком, в итоге получается плитка по 3 эл-та в строчку 
        ## и N в длину и залезает на bot, соотвественно и на footer ##
    <div id="stzp"> 
        <div id="stSubzp">
            <a title="test" href="https://www.cyberforum.ru/html/html/...">test</a>
        </div>
        <div id="stSubzp">
            <a title="test" href="https://www.cyberforum.ru/html/html/...">test2</a>
        </div>
        <div id="stSubzp">
            <a title="test" href="https://www.cyberforum.ru/html/html/...">test3</a>
        </div>
        <div id="stSubzp">
            ...
        </div>
    </div>
    ## --------------------- ##
    <div id="divider"></div>
    <div id="divider2"></div>
</div>
<div id="bot" style="width:600px;">     
    <div class="module">
        ...
    </div>
</div>
<div class="footer"> 
        ...

Добавлено через 22 часа 59 минут
Up & And Help Please

@Taatshi · 05.09.2012, 22:38

у Вас диву #stSubzp выставлено значение float:left Общий контейнер для дивов с float не тянется по высоте, поэтому контент наползает на футер. При использовании float крайне рекомендуется использовать очистку после всех дивов с float

Лечится так. В самом низу общего контейнера, который перестал растягиваться из-за float внутренних дивов, я обычно прописываю еще один технический див

HTML5
1
<div class="clear"></div>

стиль css для него такой

CSS
1
2
3
4
5
6
7
8
.clear {
clear:both; 
content:""; 
display:block; 
height:0; 
font-size:0;
overflow: hidden;
}

08.09.2012, 00:07

Спасибо, помогло!
Теперь проблема в том, что у wrapper есть фоновый рисунок, он рвется когда начинается <div id="stzp"> и далее идет белый фон вместо картинки, хелп!

Добавлено через 3 часа 41 минуту
Косяк оказывается был в том, что я один <div> забыл закрыть.
А с бекграундом ошибка присутствует =\

@EPMAK · 08.09.2012, 05:36

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

Теперь проблема в том,

Если бы вы сразу дали ссылку на ресурс с проблемой, или выложили архив с рабочим кодом+картинки, сообщили в каких браузерах неправильное отображение, я помог бы вам.
А так лишь можно строить предположения, почему там белый фон вместо картинки.
Вариантов может быть несколько:
начиная от размеров (фик\нефикс) и заканчивая общим обнулением свойств css.

Вобщем ждите , может телепаты зайдут в тему или колдун какой, местный

12.09.2012, 03:25

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
<!doctype html>
  <html lang="en">
   <head>
       <meta charset=windows-1251 >
       <link href="style.css" rel="stylesheet">       
               <title>DIV</title>
   </head>
 <body>
    <!--контейнер -->
    <div id="container">
             <!-- шапка -->
       <div id="head"> Шапка сайта </div>
              <!--фон правого блока/управление позицией -->
              <div id="right_bloc"> 
              <!--фон левого блока/управление позицией -->                 
                          <div id="left_bloc">
                <!--колонки -->          
                <!--левая колонка-->
                <div id="left"> Левая колонка </div>
                <!--правая колонка-->
                                <div id="right"> Правая колонка </div>
                <!--центральная колонка -->
                                <div id="center"> Центральная колонка </div>
                <!--подвал --> 
        <div id="footer"> Подвал сайта </div>
             <!--закрываем фон правого блока-->
             </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
      /*страница*/
html,body{
              margin:0px;
              padding:0px;
              background:#f5f5dc;
              }
    /*контейнер*/  
#container{
               width:950px;
               min-width:640px;
               min-height:100%;
               margin:auto;
               }
     /*шапка*/  
#head{
         height:100px;
         background:#d8ffc0;  
         text-align:center; 
         }           
       /*блоки для позиции на странице */
#right_bloc{
            
               }
#left_bloc{
            
              }
 /*колонки для контента*/                    
  /*левая*/
#left{
        float:left;
        width:155px;
        background:#f0e68c;
    text-align:center;
    height:100px; /*удалить это для наглядности*/  
        }             
 /*центр*/
#center{
            margin:0 156px;
        background:#00fa9a;
        text-align:center;
        height:100px; /*удалить это для наглядности*/   
            }             
 /*правая*/
#right{
         float:right;
         width:155px;
     background:#9370db;
     text-align:center;
     height:100px; /*удалить это для наглядности*/
         }
   /*подвал страницы*/              
#footer{
        clear:both;
        width:950px;
        height:100px;
        background:#FFC0FF;
        margin:auto;
        text-align:center;
        }

Рабочий вариант

Новые блоги и статьи Все статьи Все блоги /
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 Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

tCode
	08.09.2012, 00:07
	Спасибо, помогло! Теперь проблема в том, что у wrapper есть фоновый рисунок, он рвется когда начинается <div id="stzp"> и далее идет белый фон вместо картинки, хелп! Добавлено через 3 часа 41 минуту Косяк оказывается был в том, что я один <div> забыл закрыть. А с бекграундом ошибка присутствует =\

div верстка

Решение