Vertical rule within a div

jsFiddle

I have a "vertical rule" within a div (actually the border-right of a nested div). However, I am having trouble making it span the whole of its container. I have tried mo开发者_StackOverflow中文版difying the margins (try removing the comments from margin-top: 20px; in the #vr but to no avail.

Also, how do I make the #wrapper expand to fit its contents?

EDIT: Sorry, I was unclear. I am trying to work around the padding in the #wrapper because it's necessary for other things.

EDIT: I've worked it out: or is there a cleaner way?

---

the padding needs to be a property of #vr Does this look right? http://jsfiddle.net/Gfn9U/4/

---

It's because of the padding in the wrapper

Make the top and bottom paddings 0px

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