Geek Answers Handbook

Separator Between Grid Columns

how can i add a separator between grid columns. I am trying to add a border and it always broke the layout. Please take a look at the attached photo for a clear understanding.

enter image description here

EDIT

look at 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>
+4
source share
3 answers

Adding a border will add an extra 1px, so it breaks the layout instead of adding a border column to the grid, try adding a div to it and giving it a border ...

+1
source

put a wrapper div around your content inside the div grid

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 */ }
+4
source

as gtamil says it will add border width to each column. So the options for yuor, 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, not the actual borders

Option 3 is usually my preference, since I usually want the delimiters to be equal in height. I would have a background image on a container-container (not div columns) that repeats vertically. If you want to use this method, but do not have dividers of equal height, you can add the same image to the columns.

0
source

More articles:


All Articles