<hr> below each three <div>s - html

Question

I'm trying to put a <hr> below each three <div>s (one <hr> per three <div>s), however I'm getting unexpected results. I came to the conclusion that I have to put a <hr> below each third <div>, but when I do that, it is not positioned correctly (see the demo).
I am using this Django template:
{% extends 'pages/base.html' %}
{% load static %}
{% block cssfiles %}
<link rel="stylesheet" href="{% static 'products/css/list.css' %}" />
{% endblock %}
{% block jsfiles %}
<script type="text/javascript" src="{% static 'products/js/ellipsis.js' %}" defer></script>
{% endblock %}
{% block content %}
{% for product in products %}
<div class='product'>
<div class='product-title'>{{ product.title }} ({{ product.year }})</div>
<hr class='product-separator'>
{% if product.image %}
<div class='product-image'>
<img src='{{ product.image.url }}' width='100' height='100'>
</div>
{% endif %}
<p class='product-price'>${{ product.price }}</p>
</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}
Here is the jsfiddle link.

Answer 1

Consider using CSS Grid and Flexbox for finer grained control. See the four CSS rules I added at the top of your code:
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid > hr{
grid-column: 1/4;
width: 100%;
}
.product {
display: flex;
flex-flow: column;
}
.product > .product-price{
margin-top: auto;
padding-top: 15px;
}
ul#menu {
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding :0;
}
li {
display: inline-block;
margin-right: 1px;
}
li a {
display:block;
min-width:103px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "Share Tech Mono";
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*.product {
float: left;
width: 215px;
max-width: 215px;
height: 215px;
max-height: 215px;
}*/
.product-title {
color: #62646a;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
font-weight: bold;
font-size: 13px;
line-height: 13px;
/*height: 26px;
overflow: hidden;*/
}
.product-description {
margin-left: 10px;
margin-right: 10px;
font-size: 12px;
text-align: justify;
text-justify: inter-word;
}
.product-separator {
height: 1px;
border-top: 1px;
border-left: 1px;
border-right: 1px;
margin-left: 10px;
margin-right: 10px;
color: #d9d7d7;
}
.product-image img {
display: block;
margin: auto;
margin-top: 20px;
}
.product-price {
color: #62646a;
margin-top: 15px;
margin-left: 10px;
font-size: 18px;
}
.product:hover {
background: #f5f3f2;
}
body {
margin: auto;
max-width: 800px;
}
<nav>
<ul id='menu'>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<div class="grid">
<div class='product'>
<div class='product-title'>Franz Joseph (1917)</div>
<hr class='product-separator'>
<p class='product-price'>$100.00</p>
</div>
<div class='product'>
<div class='product-title'>Krugerrand South Africa (1917)</div>
<hr class='product-separator'>
<p class='product-price'>$200.00</p>
</div>
<div class='product'>
<div class='product-title'>Morgan Silver Dollar (1965)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$50.00</p>
</div>
<hr>
<div class='product'>
<div class='product-title'>Peace Silver Dollar (1934)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$75.00</p>
</div>
<div class='product'>
<div class='product-title'>Kralj Petar Drugi (1978)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$1.00</p>
</div>
<div class='product'>
<div class='product-title'>Kralj Stefan Prvi Prvovencani Kotromanic (1389)</div>
<hr class='product-separator'>
<p class='product-price'>$1000.00</p>
</div>
</div>

Answer 2

it's the float that's breaking everything since you're telling the browser to display the products next to eachother.
try this:
</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr style="clear:both;">