How to add a vertical line between two divs

Question

I want to make a vertical line between two div s. we have hr for the horizontal line, but not for the vertical line, as I know. Is there any way to do this 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 create a vertical separator. You do not need an extra div so that the separator simply uses pseudo-elements and stylizes 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 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 divs 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 here is how I would do it. Note that after floating elements you should use clear: both; .

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 in a wrapper and make this one screen: table-cell.

 .bigwrapper{ display:table; width:100%; } 

second: create another div vr class between your two wrappers and create it like this:

 .vr{ width:1px; display:table-cell; background-color:black; height:100%; } 

Final demonstration at:

https://plnkr.co/edit/uJsmrCaF9nns49J5RcYj?p=preview