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/