How to Create a Flexible Vertical Line in Between Two Divs

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>

trying to create a line between two divs

You can use Flexbox

section {  display: flex;  align-items: center;}.line {  height: 2px;  flex: 1;  background: red;  margin: 0 10px;}

<section>  <div class="home">Home</div>  <div class="line"></div>  <div class="logout">Reports    <button> <a href="web url"> log out </a> </button>  </div></section>

vertical lines with full height between divs

I think this does what you want.

JSFiddle example

The HTML structure is a bit more complicated than yours:

<div class="menu-top">Menu top</div>
<div class="wrapper">
    <div class="menu-left">Menu left</div>
    <div class="content">
        <div class="column">
            <div class="column-content">
                 <h1>Column 1</h1>
            </div>
        </div>
        <div class="column">
            <div class="column-content">
                 <h1>Column 2</h1>
            </div>
        </div>
        <div class="column">
            <div class="column-content">
                <h1>Column 3</h1>
            </div>
        </div>
    </div>
</div>

And here's the CSS:

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
.menu-top {
    width: 100%;
    height: 36px;
    background-color: #3498DB;
}
.wrapper {
    display: flex;
}
.menu-left {
    height: calc(100vh - 36px);
    width: 70px;
    background-color: #59ABE3;
}
.content {
    width: calc(100vw - 70px);
    height: calc(100vh - 36px);
    background-color: #E4F1FE;
    display: flex;
}
.column {
    flex: 33;
    border-left: 1px solid hotpink;
}
.column:first-of-type {
    border-left: none;
}

Add vertical lines in equal distance between items in flexbox

You can use the shorthand flex:1; it will spray children evenly . It easily allow to add/remove child.

.details-wrapper {  display: flex;  justify-content: space-between;  align-items: center;  padding-top: 30px;  padding-bottom: 30px;  background-color: pink;  margin-bottom:3px;}
.details-wrapper div {  flex: 1;  padding: 0.5em;/* add some padding ?*/  text-align: center;  border-right: 1px solid #fff;}
.details-wrapper div:last-child {  border: none; /* remove border ? */}
.details-wrapper span {  display: block;  margin-top: 30px;  margin-bottom: 34px;  font-size: 24px;  color: #000;}
.details-wrapper p {  font-size: 16px;  color: #000;}

<div class="details-wrapper">  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div></div><div class="details-wrapper">  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div></div><div class="details-wrapper">  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div>  <div>    <span>Where does it come from</span>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div></div>

insert vertical divider line between two nested divs, not full height

Use a div for your divider. It will always be centered vertically regardless to whether left and right divs are equal in height. You can reuse it anywhere on your site.

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

Check working example at http://jsfiddle.net/gtKBs/

Show two div in same line in same horizontal line from top

Just add vertical-align: top; property in .floating-box class in css.
New CSS will be

.floating-box {
  display: inline-block;
  width: 150px;
  margin: 10px;
  border: 3px solid #73AD21;
  vertical-align: top;
}