Резина в несколько колонок

демонстрация Резина в несколько колонокrezina4kol
Долго не писал в блог, уже и забыл как это, забыл с чего начинать чем заканчивать)), ну и ладно будем учиться снова..
Статья будет краткой, но содержательной.
Так как я сам люблю полазить по блогам, по разным тематическим сайтам и у меня как и у всех иногда не бывает времени на чтение теоретической и практической части, а сразу хочется посмотреть пример и залезть в код, а уже потом если что то не понятно или просто интересно почитать о чем там пишет автор, поэтому я сразу в начале поста выкладываю ссылку на пример и на архив с примером.
Ну что же, те кто посмотрел пример и кому стало интересно или что то не понятно читаем дальше..
Суть этого метода в том что к каждой колонке применяется абсолютное позиционирование в процентах, то есть если первая колонка будет 20% то вторая будет сдвинута влево от на 20%, так же и с третьей колонкой, если ширина второй равна 40% то позиция третьей колонки с левой стороны будет равна ширине первой + ширине второй колонки, то есть 20%+40%=60% в итоге в свойстве мы пропишем left:60%; таким же образом нужно занять все 100% нашего главного контейнера.
Но самое важное, наш главный контейнер, если мы заполняем его блоками с абсолютным позиционированием не имеет ни какого веса, то есть он просто остается быть пустым, и если мы захотим вывести еще несколько рядов колонок(именно рядов а не столбцов, не путайте) у нас новый ряд залезет на верхний так как позиция top установлена в самый верх контейнера.
Решение такое, мы для самого содержательного блока поставим position:relative; то есть относительную, и этот блок при большем содержание контента чем у других блоков будет распирать наш главный контейнер и он уже не будет пустым))
ну вроде все объяснил теперь выложу код html и css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="allwrap1"><!--наш главный контейнер для него устанавливаем относительную позицию-->
<div class="col_1">
<span>текст первой колонки текст первой колонки текст первой колонки текст первой колонки </span>
</div><!--.col_1-->
<div class="col_2">
<h2>Резиновая колонка с относительным позиционированием для распирания блока</h2>
<span>текст второй колонки тут по идее должно быть больше контента чем в других блоках </span>
</div><!--.col_2-->
<div class="col_3">
<span>текст третей колонки текст третей колонки текст третей колонки текст третей колонки  </span>
</div><!--.col_3-->
<div class="col_4">
<span>текст четвертой колонки текст четвертой колонки текст четвертой колонки </span>
</div><!--.col_4-->
</div><!--#allwrap-->
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
#allwrap1{
    width:100%;
    max-width:1680px;
    position:relative;
    border-bottom:2px solid #09F;
    margin-top:10px;
}
.col_1, .col_2, .col_3, .col_4{
    top:0px;   
    margin-left:-2px;
    border-left:2px solid #00d8ff;
}

.col_1{
    position:absolute;
    left:0px;
    width:20%;

}
.col_2{
    position:relative; //вот для этого блока мы установили относительную позицию для распирания главного блока
    left:20%;
    width:50%;
    margin-bottom:10px;
}
.col_3{
    position:absolute;
    left:70%;
    width:15%;
}
.col_4{
    position:absolute;
    left:85%;
    width:15%;
}

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

демонстрация Резина в несколько колонокrezina4kol

После прочтения данной статьи рекомендуется :
Поджечь мой RSS
И наблюдать за этим из Твиттера
Автор: Chukey | Опубликовано 16-11-2010 Рубрика: CSS

Метки: , , ,

Оставить комментарий

Это не спам.

если переменные с фида и твиттера пришли пустые