Issues in vertical hr line in html and css - html

Question

I have been created the web page using html and css.
I have been created two products in one column.
I need to add vertical hr line between these two products.
For that i did,
Html:
<div class="headerDivider"></div>
Css:
.headerDivider {
border-right:1px solid #16222c;
height:400px;
margin-right: 458px;
overflow:hidden;
}
It doesn't work correctly, Here is my jsfiddle: http://jsfiddle.net/22z6vjrx/
Can anyone please help me to fix this,
Thanks in advance .....

Answer 1

You have to float all of divs (or inline-block display). But I prefer to add vertical line as border on right for elements:
.product {
float: left;
width: 100px;
height: 200px;
margin-bottom: 5px;
}
.clear {
clear: both;
}
.first {
background-color: #eee;
}
.product:not(:last-child) {
border-right: 1px solid black;
}
.second {
background-color: #ddd;
}
.third {
background-color: #dfd;
}
.fourth {
background-color: #ddf;
}
<div class='row'>
<div class='clear'></div>
<div class="product first"></div>
<div class="product second"></div>
</div>
<div class='row'>
<div class='clear'></div>
<div class="product third"></div>
<div class="product fourth"></div>
</div>
Updated version
Add box-sizing: border-box; to include border and padding to element width (otherwise with will be too big as it will be width + border-width * 2 + padding * 2). Also make sure you have floated products divs as well as vertical hr:
.product,
.vhr {
box-sizing: border-box;
}
.product {
float: left;
width: 49%;
height: 200px;
margin-bottom: 5px;
}
.first {
background-color: #eee;
}
.second {
background-color: #ddd;
}
.vhr {
float: left;
border-left: 1px solid black;
height: 200px;
width: 1%;
margin-left: 1%;
}
<div class="product first"></div>
<div class="vhr"></div>
<div class="product second"></div>