vertical lines with full height between divs - html

Question

I have three divs (left, mid and right) and these divs don't have an exact height, because it depends on how many rows text are inside the div.
Now I want vertical lines (which seperate the three divs) through the whole height of the users monitor, no matter how high the divs are.
How can I do this? Because , as you can see in the css-code, border-right/border-left don't work for 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 is a top-menu which is 36px high */
left: 70px; /* because there is a side-menu which is 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: I would like to have these seperate-lines 1px wide and I cannot set the height of content_left, content_mid, content_right to 100% because I have resizeable boxes in these divs.

Answer 1

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

Answer 2

You can actually fake it using background-color for the parent.
/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
.parent {background-color: #f99; height: 100%; overflow: hidden; position: relative;}
.parent .col {float: left; background-color: #fff; height: 100%; margin: 0.5%; width: 32.25%; position: relative;}
<div class="parent">
<div class="col">
<p>I am one line!</p>
</div>
<div class="col">
<p>I am three lines!</p>
<p>I am three lines!</p>
<p>I am three lines!</p>
</div>
<div class="col">
<p>I am two lines!</p>
<p>I am two lines!</p>
</div>
</div>
Fiddle: http://output.jsbin.com/hefefawilu/1

Answer 3

Just Created a fiddle using your code.
See and let me know if this solves your issue.
http://jsfiddle.net/knxd0htm/
Add this part of code to make it work
**HTML:**
<div class="content">
<div class="content_left">a</div>
<div class="full-height one"></div>
<div class="content_mid">b</div>
<div class="full-height two"></div>
<div class="content_right">c</div>
</div>
**CSS**
/**** CODE ****/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.content {
height: calc(100%-36px);
min-height: calc(100%-36px);
}
.full-height {
position: absolute;
height: 100%;
border-left: 1px solid red;
}
.full-height.one {
left: 22.5%;
}
.full-height.two {
right: 22.5%;
}
/**** CODE ****/

Answer 4

You can achieve this without adding an extra HTML by using Pseudo selectors. I've also tidied up some of the code that works out widths :).
* {
box-sizing:border-box;
}
html, body {
height:100%;
width:100%;
}
body {
position:relative;
margin:0;
padding:0;
}
.content {
line-height: 1.1;
background-color: #FFF;
color: #000;
position: absolute;
top: 36px;
/* because there is a top-menu which is 36px high */
left: 70px;
/* because there is a side-menu which is 70px wide */
right: 0px;
bottom: 0px;
overflow-x: hidden;
overflow-y: auto;
}
.content_left {
position: absolute;
width: calc(25% - 35px);
left: 0px;
top: 0px;
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: calc(25% - 35px);
right: 0px;
top: 0px;
padding: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
.content:before {
content: '';
border-left:1px solid #ccc;
width:0;
position:absolute;
top:0;
left:25%;
bottom:0;
}
.content:after {
content: '';
border-right:1px solid #ccc;
width:0;
position:absolute;
top:0;
right:25%;
bottom:0;
}
<div class="content">
<div class="content_left"></div>
<div class="content_mid"></div>
<div class="content_right"></div>
</div>