Geek Answers Handbook

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

I use 960.gs grid for design. What is the best way to add a thin dividing vertical line between two drawers? Width and color should be adjustable.

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

+3
source share
4 answers

You can implement the border using the :after pseudo- :after and absolute positioning, for example:

 .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 the demo http://jsfiddle.net/andresilich/ZTyf4/show/

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

+7
source

If you do not want the separation line to change the position of the next DIV line, I think that absolute positioning is your best bet. What you can do is use absolutely positioned: after the selector positions something relative to the bottom of the window, it still does not affect the layout. This helps me position the line between the drawers without affecting the 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; }
+3
source

I think this is not possible without jQuery. The main problem is taking into account the variable height of the elements.

link 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 .container in the .container div have a 2px solid black border to the right. However, an element with class box-2 , which directly passes an element with .box-1 , will have a solid black border with a resolution of 2px and without border-right. For now, this creates a 3px border between the two elements.

Now .box-1 ~ .box-2 selects any .box-1 that immediately precedes .box-2 and sets its margin-left to -2px. This drags it from two pixels to the left, which actually overlaps the borders of both elements.

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

No matter which div has the most content, the border will be displayed as the height of the div with the most content.

+2
source

Perhaps I do not understand your problem. I would probably just use the right or left border on one of the columns and adjust the gasket to make sure it is centered between the two.

0
source

More articles:


All Articles