html - vertical lines with full height between divs -

i have 3 divs (left, mid , right) , these divs don't have exact height, because depends on how many rows text inside div. want vertical lines (which seperate 3 divs) through whole height of users monitor, no matter how high divs are.

how can this? because , can see in css-code, border-right/border-left don't work me.

intention html

<div class="content">     <div class="content_left"></div>     <div class="content_mid"></div>     <div class="content_right"></div> </div> 

css

.content {       line-height: 1.1;     background-color: #fff;     color: #000;      position: absolute;     top: 36px; /* because there top-menu 36px high */     left: 70px; /* because there side-menu 70px wide */     right: 0px;     bottom: 0px;     overflow-x: hidden;     overflow-y: auto; } .content_left {     position: absolute;     width: 22.5%;     left: 0px;     top: 0px;     border-right: 1px solid #ccc;     padding: 10px;     overflow-x: hidden;     overflow-y:hidden; } .content_mid {     position: relative;     width: 50%;     top: 10px;     left: 25%;     float: left;     padding-left: 10px; } .content_right {     position: absolute;     width: 22.5%;     right: 0px;     top: 0px;     border-left: 1px solid #ccc;     padding: 10px;     overflow-x: hidden;     overflow-y: hidden; } 

edit 1: have these seperate-lines 1px wide , cannot set height of content_left, content_mid, content_right 100% because have resizeable boxes in these divs.

i think want.

jsfiddle example

the html structure bit more complicated 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 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; }