How to Add Vertical Line Between Two Divs

#wrapper_1 {

  background-color: pink;

  height: 100px;

  float: left;

  width: 100px;

}

#wrapper_1:after {

  content: "";

  background-color: #000;

  position: absolute;

  width: 5px;

  height: 100px;

  top: 10px;

  left: 50%;

  display: block;

}

#wrapper_2 {

  background-color: brown;

  height: 100px;

  width: 100px;

  float: right;

}

<div id="wrapper_1">

  Creating slideshows PHP

</div>

<div id="wrapper_2">

  Creating slideshows with WordPress

</div>

How to put vertical line between two divs?

you can use border-right instead of div:
here is the updated fiddle:

.card-body {

  display: flex;

}

.col {

  padding: 10px;

}

.border-line {

  border-right: 1px solid #000;

}

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">

  <div class="col border-line">

    <div class="row justify-content-center">

      <h4>Most popular ads</h4>

    </div>

    <div class="row">

      <div class="col">Column</div>

      <div class="col">Column</div>

      <div class="w-100"></div>

      <div class="col">Column</div>

      <div class="col">Column</div>

    </div>

  </div>

  <div class="col">

    <div class="row justify-content-center">

      <h4>Latest ads</h4>

    </div>

    <div class="row">

      <div class="col">Column</div>

      <div class="col">Column</div>

      <div class="w-100"></div>

      <div class="col">Column</div>

      <div class="col">Column</div>

    </div>

  </div>

</div>

<hr>

Vertical line between two div limited height

You can try using an ::after pseudo element.

.line {
    position: relative;
}
.line:after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 1px solid #cfc7c0;
    top: 10%;
    bottom: 10%;
}

.container {

    display: table;

    border: 1px solid blue;

}

.line {

    padding-right: 21px; /* 20+1 */

    position: relative;

}

.line:after {

    content: '';

    position: absolute;

    right: 0;

    border-right: 1px solid #cfc7c0;

    top: 10%;

    bottom: 10%;

}

.first {

    display: table-cell;

    width: 30%;

}

.second {

    display: table-cell;

    width: 30%;

    padding-left: 10px;

}

<div class="container">

    <div class="first line">this is first div and some text</div>

    <div class="second">

        Right

        <br/>and more

        <br/>Side

    </div>

</div>

Centred vertical line between two divs

Change your margins to paddings, and then set the border

div.contentswrapper {

  text-align: center;

  margin: 0 auto;

  max-height: 720px;

}

div.pageleft,

div.pageright {

  display: inline-block;

  vertical-align: top;

  overflow: auto;

}

div.pageleft,

div.pageright {

  width: 40%;

  padding-left: 3%;

  padding-right: 3%;

}

div.pageleft {

  border-right: 2px solid red;

}

<div class="contentswrapper">

  <div class="pageleft">

    <h1>Lorem Ipsum</h1>

    <p>

    </p>

    <p>

    </p>

  </div>

  <div class="pageright">

    <h1>Lorem Ipsum</h1>

    <p>

    </p>

    <p>

    </p>

  </div>

</div>

How do I make a vertical line with text in the middle surrounded by two divs? - html/css

You can achieve this with align-items: center on the wrapper and two pseudo elements ::before and ::after which you set to width: 0 and its border to 1px, so that it becomes 2px (border-left + border-right). The wrapper needs position: relative for that.

The pseudo elements are positioned absolutely and can be alligned to the center by setting its left property to 50%. "Below" and "above" are controlled by bottom: 0 and top: 0.

.holderCalc {
  margin: auto;
  width: 75%;
  border: solid 2px black;
  text-align: center;
  padding: 10px;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.divCalc1 {}

.divCalc1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 40%;
  border: solid 1px black;
}

.divCalc2 {
  color: black;
  text-align: center;
  font-size: 16px;
}

.divLine1 {
  width: 80.7%;
}

.divLine2 {
  width: 90.8%;
}

.lxbBox {
  width: 50%;
}

.area10Calc {
  width: 50%;
}

.inputCalc {
  background-color: white;
  color: grey;
  width: 80%;
  height: 50px;
  border: solid 2px black;
  font-family: initial;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: futura-pt;
  padding: 2px;

<div class="holderCalc">
  <br>
  <div class="wrapper">
    <div class="lxbBox">
      <select class="inputCalc" id="ddm" onchange="areaUpdated()">
        <option value="mm">MILLIMETRES</option>
        <option value="cm">CENTIMETRES</option>
        <option value="inch">INCHES</option>
        <option value="m">METRES</option>
      </select><br><br>
      <input id="len" class="inputCalc" type="text" placeholder="LENGTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()"><br>
      <p class="divCalc2">X</p>
      <input id="wid" class="inputCalc" type="text" placeholder="WIDTH" autocomplete="off" onclick="lxbUpdated()" onchange="validateInput()">
    </div>
    <div class="divCalc1">OR</div>
    <div class="area10Calc">
      <input id="area" class="inputCalc" type="text" placeholder="AREA (M²)" autocomplete="off" onclick="areaUpdated()" onchange="validateInput()"><br><br><br>
      <hr class="divLine1" size="2px" color="black">
      <br>
      <input id="addWaste" type="checkbox">
      <label class="text" for="addWaste">ADD 10% FOR CUTS AND WASTES</label><br><br>
      <button onclick="calculate()" class="calculateButton">CALCULATE</button>
    </div>
  </div>
  <hr class="divLine2" size="2px" color="black">
  <p class="text" id="output">TO COVER 0.00M², YOU NEED 0 TILES</p>
</div>

How to connect a horizontal/vertical line between two divs?

You can create a div with a class of something like connector and style this to look like the connector with the following CSS:

.connector {
  border: 6px solid #333;
  border-right: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  height:50px;
  width: 10px;
}

You can change the appearance of this by playing around with the border thickness, colour and border-radius. This takes care of the styling.

To position it correctly, you can use absolute or relative positioning. In this case to use absolute positioning, apply position:absoluteto the connector class. To position it use properties such as top, bottom, left and right. The absolute position will absolutely position the element relative to the entire page so I'd recommend adding position:relative to its parent container so it is positioned relative to this.

.container{

 height:800px;

 width:100%;

 padding:50px;

background:#eeeeee;

    position:relative;

  }

.box-1{

  height:300px;

  width:300px;

  background:blue;

  color:#fff;

  margin-bottom:30px;

 }

.box-2{

  height:300px;

  width:300px;

  background:red;

  color:#fff;

 }

.connector {

  position:absolute;

  top: 335px;

  left: 35px;

  border: 6px solid #333;

  border-right: 0;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

  height:50px;

  width: 10px;

}

<div class="container">

  <div class="box-1">

    Box 1

  </div>

  

  <div class="box-2">

    Box 2

  </div>

  

  <div class="connector"></div>

</div>

Divs side by side with same height and vertical line between them

Solution with flexible height

using a wrapper to achieve the divider without interruption.

.col-item {

  width: 49%;

  margin-right: 2%;

  margin-bottom: 15px;

  border: 1px solid blue;

  padding: 5px;

  box-sizing: border-box;

}

.col-item:nth-child(2n) {

  margin-right: 0;

  padding-right: 0;

}

.col-item:nth-last-child(2),

.col-item:last-child {

  margin-bottom: 0;

}

.wrapper {

  display: flex;

  flex-wrap: wrap;

  position: relative;

}

.wrapper:after {

  content: "";

  position: absolute;

  top: 0;

  left: calc(50% - 1px);

  height: 100%;

  border-right: 1px solid red;

}

<div class="wrapper">

  <div class="col-item">

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>

  <div class="col-item">

    At vero eos et accusam et justo duo dolores et ea rebum.

  </div>

  <div class="col-item">

    Lorem ipsum dolor sit amet!

  </div>

  <div class="col-item">

    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  </div>

</div>

---

Related Topics