Blueprint CSS framework or any Grid system: fix for bordered divs

Question

I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images Click to zoom Click to zoom

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 span-XX classes anymore. Is there any other way to fix it?

Answer 1

If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is

<div class="span-24">
    <div class="box">here</div>
</div> 

and add the border to the box class for above snippet.