How to add a vertical line between two 960.gs boxes?

Question

I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable.

My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution?

Answer 1

You can implement a border using the pseudo-selector :after and absolute positioning, like so:

.line:after {
    border-right: 1px solid #000000;
    content: "";
    display: block;
    margin: 1px;
    position: absolute;
    right: -11px;
    top: 0;
    bottom: 0;
}

.grid_1,  .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,  .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    position:relative;
}

Here is a demo http://jsfiddle.net/andresilich/ZTyf4/show/

Edit here http://jsfiddle.net/andresilich/ZTyf4/

Answer 2

If you don't want the separating line to change the position of the next row of DIVs, I think absolute positioning is your best bet. What you could do is use an absolutely-positioned :after selector to position something relative to the bottom of the box yet not affect the layout. This works for me to position a line between boxes without affecting layout, just change the values of the last four properties as needed:

#topbox:after {
    content: "";
    display: block;
    position: absolute;
    margin-top: 25px;
    height: 5px;
    width: 400px;
    background-color: #999;
}

Answer 3

I think this is do-able without jQuery. The main issue is accounting for the variable height of the elements.

reference here: http://jsfiddle.net/uqZgt/1/

HTML:

 <div class="container">
    <div class="box-1">
        This box has alot of content. This box has alot of content. This box has alot of content. 
    </div>

    <div class="box-2">
        This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
    </div>
</div>

CSS:

.container {
   width: 242px;   
}

.container div {
   width: 100px;
   background: #ff0000;
   float: left;
   padding: 10px;
   border-right: 2px solid #000
}

.box-1 + .box-2 {
   border-right: none;
   border-left: 2px solid #000
}

.box-1 ~ .box-2 {
    margin-left: -2px
}

in this example, all divs in the .container div have a 2px solid black border-right. However, an element with class box-2 which directly proceeds an element with .box-1 will have a 2px solid black border-left, and no border-right. So far this creates a 3px border in between the two elements.

Now, .box-1 ~ .box-2 selects any .box-1 that directly preceeds a .box-2, and sets it's margin-left to -2px. This drags it's sibling two pixels to the left, which effectively makes the borders of both elements overlap.

The .container div has a width equal to the sum of the width of the two elements (200px), plus padding (10px right and left = 20px) plus the width of one of the borders (2px). 242px, so the two elements fit perfectly.

No matter which div has more content, the border will appear to span the height of the div with the most content.

Answer 4

I may not be understanding your problem. I would probably just use a right or left border on one of the columns and adjust padding to be sure it is centered between the 2.