how to add vertical line between two divs - css

Question

I want to make a vertical line between two divs. we have hr for horizontal line but none for vertical line as I know. Is there anyway to make it without using border?
<style>
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
</style>
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>

Answer 1

You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.
#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>
PS: Beware of the absolute positioning of the pseudo elements.
Thanks.

Answer 2

You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.
hr.vertical {
height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
width:0;
border:1px solid black;
}

Answer 3

Create a new div between your two div and add this class:
.vertical-row {
Float:left;
height:100px;
width:1px; /* edit this if you want */
background-color: your color
}

Answer 4

I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both; after floating elements.
HTML:
<div class="container">
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div class="seperator"></div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
<div class="clearfix"></div>
</div>
CSS:
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
.seperator {
height: 100%;
width: 1px;
background: black;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
}
.container {
position: relative;
}
.clearfix {
clear: both;
}
DEMO: jsfiddle

Answer 5

sure you can:
just wrap the elements into a wrapper and make that one display:table-cell.
.bigwrapper{
display:table;
width:100%;
}
second: create another div width class "vr" between your two wrappers and style it as follows:
.vr{
width:1px;
display:table-cell;
background-color:black;
height:100%;
}
Final Demo at:
https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview

Answer 6

If you are using flex element and you are having issues with element(s) transforming to columns because of the display: flex; property, use the box-shadow property on the element as it does not add up to the container space.