How to make this vertical line go between columns in one piece? - html

Question

I am trying to get this red line exactly between the columns, precisely to make it stand between Lorem ipsum's and paragraphs. The problem is that it should be one long line that goes through the page, but this one breaks because of the new row. Is there a better way to do it maybe..?
Here's the current state: http://codepen.io/anon/pen/WReerM
.content--border {
border-right: 2px solid red;
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>

Answer 1

The easiest way is to move content--border class to col-md-7 instead of col-md-3.

Answer 2

You can move the border to the left edge of col-md-7 instead.
.content--border {
border-left: 2px solid red;
}
Also can put it in a media query so it disappears on smaller screens:
#media screen and (min-width: 992px) {
.content--border {
border-left: 2px solid red;
}
}
Demo here

Answer 3

Move the border to the left of your other column:
.content--border {
border-left: 2px solid red;
}
see my working codepen:
http://codepen.io/egerrard/pen/pRzzRx

Answer 4

HTML:
<div class="container content">
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>
CSS:
.content--border {
border-left: 2px solid red;
}

Answer 5

You can use :before pseudo element of parent element (.container) to draw this line. This will allow to have straight line without any breaks irrespective of content length in both columns.
Note: Please see the demo in full page mode.
Necessary CSS:
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 </p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>

Answer 6

it would be easier to make a div element and place it between them with absolute positioning, give the div a height and manipulate using its margin or the top left property and position it where you want, also encase it all in a div...