Колонки одинаковой высоты

блоки одинаковой высоты, Колонки одинаковой высоты, вестка блоками, DIVная верстка

Колонки одинаковой высоты

» » Сообщение:

Колонки одинаковой высоты

В общем-то тема известная, просто для себя
---
HTML

Код: Выделить всё Развернуть
<div class="text_container_l">
<div class="text_container_r">
<div class="text_l">
тут текст длиннее
</div>
<div class="text_r">
или тут, неважно
</div>
</div>
</div>

CSS резиновый

Код: Выделить всё Развернуть
.text_container_l {
width: 50%;
float:left;
}
.text_container_r {
width: 100%;
float:left;
margin:0 0 0 100%;
}
.text_l {
float:left;
width:100%;
margin:0 0 0 -100%;
}
.text_r {
float:left;
}

CSS фиксированная ширина

Код: Выделить всё Развернуть
.text_container_l {
width: 400px;
float:left;
}
.text_container_r {
width: 200px;
float:left;
margin:0 0 0 400px;
}
.text_l {
float:left;
width:400px;
margin:0 0 0 -400px;
}
.text_r {
float:left;
}

В «резиновом» примере предоставлен макет из двух колонок шириной по 50% от ширины контейнера. Обратите внимание, что колонки обернуты двумя <div>-ами, которые будут наследовать высоту вложенных колонок и каждый будет выводить свое фоновое изображение.

Внешним двум контейнерам просто задаем нужные нам широты для колонок, а второму также добавляем компенсацию отступом, равным размеру первой колонки.
Далее задаем ширину первой колонки и также компенсируем отрицательным отступом, равным ширине первой колонки.
Вторая колонка просто «плывет по течению».

Растягивающийся фон, который будет всегда одной высоты, необходимо прописывать в контейнеры а не в колонки. Также следует избегать всяческие верхние и нижние отступы для контейнеров, например: padding, margin, border. Поскольку все контейнеры вложены друг в друга, то такие отступы у родителя сдвинут всех детей. Если для колонки нужен border, можно использовать вместо него outline или box-shadow:0 0 0 4px #ccc;. Свойство padding также не рекомендуется применять на саму колонку, так как это может увеличить ее ширину и тогда придется рассчитывать «компенсации» и ширину колонки с его учетом. Проще поместить в колонку еще div и с ним уже творить, что угодно.

Основная сложность с процентами, это рассчитать ширину второй колонки относительно первой. То есть если ширина первой колонки 30%, а вторая должна быть в 2 раза больше, то это будет 200% от ширины первой колонки, если в 2 раза меньше, то это будет 50% — такую ширину и нужно на нее ставить.

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

© http://habrahabr.ru/post/148327/




Похожие темыКомментарии ПросмотрыПоследнее сообщение
01395Блоки одинаковой высоты. Как сделат...
Сообщение от: Admin
0634Колонки одинаковой высоты - лучшее ...
Сообщение от: Admin