Separator Between grid columns

Question

how can i add separator between grid columns. I try adding border and it always broke the layout. Please have a look at the attached picture for clear understanding.

EDIT

have a look it here

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

code

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

Answer 1

place a wrapper div around your content inside the grid div

HTML:

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS:

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}