Creating properly-sized vertical dividers between columns seems like it ought to be easy. It is, if you're using tables for layout: you bang out a couple of cells, put a border-right on the left one, and you're done. If, on the other hand, you choose to write standards-compliant HTML, you're heading down a harder road.
Before redesigning this site, I was using a fixed-width site with a background image that repeated vertically, which looked mostly okay but was extremely unsatisfying when I looked at the code. (Oh, and it and broke the instant I needed to change the width of the page.)
Tearing down YUI Grids to the bare metal--which I strongly recommend as good exercise, by the way; you shouldn't use a library if you don't know how it works--revealed one possible answer. Here's how I got away with it for the redesign:
body {
background:#fff;
margin:auto;
margin-bottom:20px;
text-align:center;
text-align:left;
/* body needs to be set in pixels, not ems */
width:974px;
}
/* bd and border-wrapper make the right-height border between nav and content */
/* my columns are 14% and 85%, so: halfway betwen 14% and 85% is 85.5% */
/* 85.5% of 974 = 832.77. Round up, subtract 2px for border width and 1px for slop = 830 */
.border-wrapper {
border-left:2px dotted black;
margin-left:830px;
}
#bd {
margin-left:-830px;
}
Figure out your column widths, wrap a div classed border-wrapper around your existing bd division, and this ought to work.
Important: You'll need to set the width of your page in pixels, not ems, and be prepared for your text to stack ever higher (or stretch wider) as your users increase or decrease their font size. Sorry, but the lovely proportional-width increase inherent in YUI Grids goes away.
It's also possible to create a solid stripe of color down the side, by changing border-wrapper's border and margin thusly:
.border-wrapper {
border-left:130px solid yellow;
margin-left:845px;
}
Your exact numbers for this will vary, depending on how wide your columns are and the margins you're using inside them. I've made this work for right and left columns; it seems like it would probably work for any situation where you needed a solid color or border between your main content and your navigation.