del.icio.us .:. tweet

Vertical Dividers with YUI Grids .:. kentbrewster.com

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.

Comments from before Disqus:

Xsss4hell .:. 2009-08-04 10:27:44
Hi, Mr. Kent! :)

I would solve that design issue with a 1px square gif. Simply set the gif as your background for the sidebar. And call it like this: background:url(vertical-divider.gif) repeat-y scroll top left; and that's it! If you would like to make it even cutier, say you want to have the vertical diviver fade away on the top and bottom of the sidebar, you could use multiple backgrounds. This would be CSS3, in case that browsers don't understand CSS3, only safari does atm, but Firefox (which just reached 1billion downloads) will support it very soon. This is called progressive enhancement :)

Have nice day
superman.. eh Mr. Kent :P

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact