CSS 2-колоночный макет - как максимизировать высоту границы раздела столбца?

Question

У меня есть две колонки. Один плавает влево, один плавает вправо. За ними следует разделительный блок, а затем нижний колонтитул. Я хочу, чтобы вертикальная линия разделяла два столбца, но проблема в том, что нет гарантии, какой столбец будет выше.

Без использования фонового изображения, как получить разделительную линию между двумя столбцами, которая использует максимальную высоту из двух?

Answer 1

Вы можете попробовать установить правую границу в левом плавающем div и левую границу в правом плавающем div. Затем вы должны установить отрицательное поле в правом плавающем элементе div, равное ширине границ. Используя этот метод, границы будут идеально перекрываться, делая его похожим на одну линию, равную высоте самого высокого div.

UPDATE

Похоже, это вызывает проблемы в IE. Вы также можете попробовать установить положение на контейнере столбца как относительное, а затем установить положение дочерних элементов на абсолютное. Левый столбец будет top: 0 и left: 0. Затем вы поместите правый столбец top: 0 и right: (ширина левого столбца - ширина границы). IE может справиться с этим немного лучше.

Answer 2

Что касается создания изображения в 1 пиксель, повторите это изображение в родительском контейнере двух столбцов.

Надеюсь, это имеет смысл.