Make child div match height of parent div, and make padding apply to a border in a div

I have two questions applying to my website.

Please view the source to help answer these two questions.

1. I want the border inside the div "nav-cont-seperator" to be shifted down 10px. I can't get padding to fix this problem, pr开发者_JS百科obably because borders ignore padding.

2. My second question is, how do I make that vertical border go to the bottom of the page (make the div match the height of its parent), minus 10px?

1. If I understand you correctly, you need a margin-top: 10px; on that div. Containers in HTML respect the box model (you can see that in firebug, for instance), meaning that the size of the element is given by: margin + border + padding. Padding applies to the inner part of a border, margin to the outside.

2. I'm not sure there's a clear way of doing that with pure HTML/CSS. Let me ask you another question... are you sure you need that div? Couldn't that separator be the right-side border of the left menu div? That might solve your problem and clear up some markup.

Anyway, if you're using jQuery, the answer here: how to size a div's height to its container height, using CSS? might be of help!