Sebastian
Sebastian

Reputation: 3628

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 modifying 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?

Upvotes: 0

Views: 230

Answers (2)

abney317
abney317

Reputation: 8492

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;
}

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78530

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

Upvotes: 1

Related Questions