Блог им. 3ds / Колонки одинаковой высоты + border-bottom!

Begin

На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз?

Вот в чем затык

Проблема в том, что колонки одинаковой высоты с нижней границей — не так то просто сделать… В основном, я использую метод с padding-ами, т.е. ставим:

.column {   padding-bottom: 32750px;   margin-bottom: -32750px; } * This source code was highlighted with Source Code Highlighter.

для колонок, которые должны быть одинаковой высоты, и помещаем эти колонки во враппер с overflow: hidden. НО! При этом нельзя задать нижнюю границу для колонок!

Решение

Все очень просто, надо обернуть враппер еще раз и внешнему указать

#container {   background:transparent url(images/example-6.gif) no-repeat scroll center bottom;   float:left;   padding-bottom:1px; } * This source code was highlighted with Source Code Highlighter.

Мы просто указали фоновую картинку для внешнего враппера, на которой изображены границы :). Мне в текущем проекте очень помогло. Если есть еще варианты без js буду рад узнать их. Ну я думаю вам станет понятней, если посмотреть на пример: www.ejeliot.com/samples/equal-height-columns/example-6.html Материал нашел здесь: www.ejeliot.com/blog/61

Источник: Уроки CSS на Хабрахабре