title: Blueprint CSS framework or any Grid system: fix for bordered divs
body: <p>I've got some problems while trying to lay out my site. I'm using <a href="http://www.blueprintcss.org/" rel="nofollow noreferrer">Blueprint Framework</a> and it happens when I apply borders to my div. Since their width are controlled by <code>span-XX</code> (or <code>grid-xx</code> as I noticed in <a href="http://960.gs" rel="nofollow noreferrer">960gs</a>), the moment I apply borders to any <code>div</code> element I have it goes out of the grid as seen in these images <img src="https://i.stack.imgur.com/Y6sfZ.png" alt="out"> <a href="http://img37.imageshack.us/i/59550451.png/" rel="nofollow noreferrer">Click to zoom</a>
  <img src="https://i.stack.imgur.com/zN5c3.png" alt="alt text">
  <a href="http://img687.imageshack.us/f/so2i.png/" rel="nofollow noreferrer">Click to zoom</a></p>
  
  <p>The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the <code>span-XX</code> classes anymore. Is there any other way to fix it?</p>