Вертикальное правило внутри div

Question

jsFiddle

У меня есть "вертикальное правило" внутри div (на самом деле border-right вложенного div). Однако у меня возникли проблемы с тем, чтобы он охватил весь свой контейнер. Я попытался изменить поля (попробуйте удалить комментарии из margin-top: 20px; в #vr, но безрезультатно.

Кроме того, как мне сделать расширение #wrapper, чтобы оно соответствовало его содержимому?

РЕДАКТИРОВАТЬ: Извините, мне было неясно. Я пытаюсь обойти заполнение в #wrapper, потому что это необходимо для других вещей.

РЕДАКТИРОВАТЬ: Я разобрался : или есть более чистый способ?

Answer 1

Это из-за заполнения в обертке

Сделать верхний и нижний отступы 0px

#wrapper {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

Answer 2

отступ должен быть свойством #vr. Это выглядит правильно? http://jsfiddle.net/Gfn9U/4/