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
