What is the best way to insert a vertical line between two 960.gs containers?

Question

What is the best way to insert a vertical line between two 960.gs containers?

Incorporating the 960.gs grid system into my design, I am looking for the optimal method to include a slim separating vertical line between two boxes that allows for customization of width and color.

One approach I have considered involves creating div classes with absolute positions and background colors for each potential position, then using JQuery to ensure they align in height with adjacent boxes. However, this process feels somewhat convoluted. Are there alternative solutions available?

css border 960.gs

Answer 1

Answer №1

To create a border using the pseudo-selector :after and absolute positioning, follow this code:

.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;
}

Check out the demo here

Make changes to the code here

Answer 2

To create a border using the pseudo-selector :after and absolute positioning, follow this code:

.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;
}

Check out the demo here

Make changes to the code here

Answer 3

Answer №2

To prevent the separating line from shifting the next row of DIVs, I recommend using absolute positioning. One approach is to utilize an absolutely-positioned :after selector to place something in relation to the bottom of the box without impacting the layout. This method has been successful for me in adding a line between boxes while maintaining the layout integrity. Simply adjust the values of the last four properties as necessary:

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

Answer 4

To prevent the separating line from shifting the next row of DIVs, I recommend using absolute positioning. One approach is to utilize an absolutely-positioned :after selector to place something in relation to the bottom of the box without impacting the layout. This method has been successful for me in adding a line between boxes while maintaining the layout integrity. Simply adjust the values of the last four properties as necessary:

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

Answer 5

Answer №3

It is completely feasible to achieve this without relying on jQuery. The key challenge lies in accommodating the varying heights of the elements.

You can find a helpful reference here: http://jsfiddle.net/uqZgt/1/

Here is the HTML structure:

<div class="container">
    <div class="box-1">
        This box contains a lot of text. This box contains a lot of text. This box contains a lot of text.
    </div>

    <div class="box-2">
        This box has less content compared to box-1. This box has less content compared to box-1. This box has less content compared to box-1. This box contains more text than box-1. This box contains more text than box-1. This box contains more text than box-1.
    </div>
</div>

The corresponding CSS styling:

.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 within the .container have a 2px solid black border on their right side. However, if an element with class box-2 immediately follows an element with box-1, it will have a 2px solid black border-left and no right border. This setup creates a 3px border gap between the two elements.

The selector .box-1 ~ .box-2 targets any instance of box-1 that directly precedes a box-2 and adjusts its margin-left to -2px. This action shifts its neighboring element by two pixels to the left, essentially causing their borders to overlap.

The total width of the .container div equals the combined width of both elements (200px), along with padding (10px on both sides = 20px) and the width of one border (2px). This sums up to 242px, ensuring a perfect fit for the two elements.

Regardless of which div contains more text, the border will visually extend to match the height of the taller div.

Answer 6

It is completely feasible to achieve this without relying on jQuery. The key challenge lies in accommodating the varying heights of the elements.

You can find a helpful reference here: http://jsfiddle.net/uqZgt/1/

Here is the HTML structure:

<div class="container">
    <div class="box-1">
        This box contains a lot of text. This box contains a lot of text. This box contains a lot of text.
    </div>

    <div class="box-2">
        This box has less content compared to box-1. This box has less content compared to box-1. This box has less content compared to box-1. This box contains more text than box-1. This box contains more text than box-1. This box contains more text than box-1.
    </div>
</div>

The corresponding CSS styling:

.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 within the .container have a 2px solid black border on their right side. However, if an element with class box-2 immediately follows an element with box-1, it will have a 2px solid black border-left and no right border. This setup creates a 3px border gap between the two elements.

The selector .box-1 ~ .box-2 targets any instance of box-1 that directly precedes a box-2 and adjusts its margin-left to -2px. This action shifts its neighboring element by two pixels to the left, essentially causing their borders to overlap.

The total width of the .container div equals the combined width of both elements (200px), along with padding (10px on both sides = 20px) and the width of one border (2px). This sums up to 242px, ensuring a perfect fit for the two elements.

Regardless of which div contains more text, the border will visually extend to match the height of the taller div.

Answer 7

Answer №4

It seems like there might be some confusion about the issue you're facing. One solution could be to add a border on either the right or left side of one of the columns, and then adjust the padding as needed to ensure that it is centered between the two.

Answer 8

It seems like there might be some confusion about the issue you're facing. One solution could be to add a border on either the right or left side of one of the columns, and then adjust the padding as needed to ensure that it is centered between the two.

What is the best way to insert a vertical line between two 960.gs containers?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Experience choppy scrolling in Internet Explorer

Responsive carousel with multiple items

Tips on preventing the fixed position from scrolling at the footer

Creating a unique custom shape for Bootstrap navigation bar

Exploring the power of nested SCSS pseudo selectors

What is the best way to ensure that content fills the entire screen?

Creating a background overlay on top of an image background using styled-components in React: A step-by-step guide

"Learn the best way to redirect the parent theme directory URL to the child theme directory in a dynamic and efficient

Adjusting iframes for responsive design using only CSS

`The header navigation is not responding to window resizing functionality`

What types of HTML are compatible with SweetAlert?

Troubleshooting Margins in Bootstrap Container

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Select elements in jQuery using both a specific selector and a negative selector

Populating check boxes in a jQuery multiselect dropdown based on option text

Clickable links and compliant W3C coding

Display the images adjacent to the usernames, followed by their respective levels underneath

Superimpose one element on top of another

Pressing the Enter key will open the file dialog for selecting specific files

Adjustable height for Material UI tab components