На днях столкнулся с задачей:
Сделать две одинаковые по высоте <div>-колонки, не зависимо от количества текста в какой либо из них.
Условия:
- Никаких таблиц;
- Поддержка IE6+ и т.д;
- Резиновая верстка;
- Никакого JavaScript, чистый HTML и CSS.
Дизайн:
В дизайне изображены две колонки с отступом друг от друга. Каждый из них имеет свой фон и border с округленными уголками. На вид все просто.
Поиск решений:
Искал и естественно нашел очень полезный пост, где описаны все самые действенные способы решения данной задачи: http://habrahabr.ru/post/64173/.
Собственно 4-е решение из этого поста было наиболее приемлемым, но с помощью него мне так и не удалось вывести два разных фона для своих колонок.
Решение
В отчаянии найти решение в интернете, я решил взять за основу структуру 4-го решения из вышеописанного поста и переделать/упростить под свои нужды.
Вышла та же структура но уже не на основе позиционирования (position:relative), а на основе отрицательных отступов (margin-left:-100%;) и более логичной структуры (сначала левая колонка/текст, потом правая).
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 контейнера, которым задать широты и соответственно скомпенсировать отступами.
Автор: JetShark
