Ненавязчиво вставлять вертикальный разделитель в макет

Question

Я хочу вставить серый вертикальный разделитель, который равномерно разделяет две стороны, чтобы показать логическое разделение.Поскольку содержимое с двух сторон может варьироваться по высоте в зависимости от того, что выбирает пользователь, разделитель должен масштабироваться соответствующим образом - другими словами, не может быть фиксированной высоты.

В качестве отступления, в идеале этот стильэлемент будет то, что я мог бы условно вставить и удалить.Очевидно, что какой-то тип div даст максимальный контроль.

Вот мой существующий код HTML / CSS:

http://jsfiddle.net/keruilin/u5GgT/47/

Answer 1

Вместо вставки элемента я бы посмотрел на стилизацию двух сторон как столбцов одинаковой высоты. Используйте рамку справа на левой стороне или рамку слева на правой стороне, чтобы показать деление.

См. CSS - Столбцы равной высоты? для получения инструкций по столбцам равной высоты.

Answer 2

Как насчет применения border-left: 2px solid gray или border-right: 2px solid gray к одному из столбцов?