CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Колонки "одинаковой" высоты с разделителем

Недавно пришла в голову простая идея эмуляции колонок одинаковой высоты без использования фонового рисунка. Метод этот подходит только для случаев, когда между колонками разделитель, а фоном колонки не выделяются. Однако из-за своей простоты заслуживает внимания. Смотреть пример.

Ситуация

Самым очевидным решением было бы обернуть эти колонки в какой то div, и для этого дива правильно спозиционировать фоновый однопиксельный рисунок ("повторить" рисунок по вертикали). Так сейчас решена идентичная проблема на сайте "A list apart". Решение было описано в статье Faux columns (и я когда то писал об этом).

Однако, делать для этого картинку мне было лень.

border + margin

1. <div id="c1">
2. тут контент
3. </div>
5. <div id="c2">
6. тут контент
7. </div>

1. #c1, #c2{
2. float:left;
3. width:281px;/*не имеет значения =)*/
4. }

1. #c1{border-right:1px solid #ccc}
2. #c2{border-left:1px solid #ccc}

1. #c2{
2. margin-left:-1px
3. }

Таким образом, теперь разделителем всегда будет служить граница большей колонки, поскольку она будет "выглядывать" из-за меньшей.

Можно сразу же развить этот метод и на три колонки, вот что получается:

• Для трех колонок - интересно что разделители получаются - "умными", то есть они разделяют не до самого низу всю страницу, а разделяют только колонки. (можно поиграться с длиной колонок, что бы увидеть эффект)
• background вместо border - просто заменяем border на background, и выставляем margin-left равный ширине фоновой картинки.

В конце

Буду рад услышать Ваши мысли, советы и рекомендации!