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

Adding border would add extra 1px , so it breaks the layout, instead of adding border to grid column, try adding a div inside of it and give border to it ...

Answer 2

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 */
}

Answer 3

as gtamil says it will add the width of the border to each column. So yuor options as I see them are: 1) do as he says 2) remove 1px from each column that has a 1px border 3) use background images rather than actual borders

Option 3 is normally my preference since usually I want the dividers to be equal height. I would have a background image on the wrapping container (not the column divs) which repeats vertically. If you want to use this method but not have the dividers equal height then you can add the same image to the columns instead.