vertical line on the middle of the page - html

Question

I need a vertical line on the middle of the page, here above i've got horizontal. What i really want is a vertical line with same style of this horizontal line.
hr.style-six {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
How could that be done?
EDIT:
the below codes work but i cannot add anything until the vertical line ends, from the point it ends i can add stuffs but not before that.
I'm trying to add things on the right and left side of the vertical line.
How could i fix it?

Answer 1

This is example with fixed vertical line, always presented, on the middle of page. None other element will move it up or down.
.vline
{
position:fixed;
top:0;
left:50%;
bottom:0; margin:0;
border:none;
border-right:solid 1px black;
z-index:10;
}
<hr class="vline" />
Update : There is example, based on Your edit. If that's what You need. Two divs floated left and right, with some padding and vertical divider line (hr)
body, html {margin:0;padding:0;}
.dleft, .dright
{
display:inline;
width:calc(50% - 20px); /*50% width minus 2xpadding = 20px*/
padding:10px;
}
.dleft
{
float:left;
background-color:yellow;
}
.dright
{
float:right;
background-color:lightblue;
}
.vline
{
position:fixed;
top:0; bottom:0;
left:50%;
border:none;
border-right:solid 1px black;
z-index:10;
margin:0;
}
<hr class="vline" />
<div class="dleft">
aslkjfklasdjfsadlkf
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
</div>
<div class="dright">
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
</div>
<div style="clear:both;"></div>

Answer 2

Here's a fast example I've made. This is one way of achieving this.
<div class="verticalLine"></div>
.verticalLine {
background-color: #000;
height: 100vh;
margin: 0 auto;
width: 1px;
}
Example 1
Another way is using absolute position like this:
.verticalLine {
background-color: #000;
height: 100%;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 2
And third way without the height property
.verticalLine {
background-color: #000;
bottom: 0;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 3

Answer 3

Since elements in HTML are rendered from top to bottom, there's no way of adding a vertical line as easily as using a <hr>. One way would be to split up the page in two <div>s and adding a border to one of the two <div>s like this:
.left-col {
width: 50%;
min-height: 200px;
border-right: 1px solid black;
float: left;
box-sizing: border-box;
}
.right-col {
width: 50%;
min-height: 200px;
float: right;
}
<div class='page'>
<div class='left-col'>
Content in the left column
</div>
<div class='right-col'>
Content in the right column
</div>
</div>
You could also use display: inline-block instead of float: right, but it will have some issues with spaces taking up a part of the 100% width (so you can't use 50% + 50% divs without using hacks). CSS-Tricks has some information on inline-block.
Depending on if you need content to the right of the vertical line, you may of course skip the .right-col entirely.
box-sizing: border-box makes the 1px border count as a part of the width, so that we can have 50% + 50% = 100%.