html - How to put each loop value into separate divs in django

Question

Here's my html page. I want each 'question' to be placed in separate div to make them look nice. So I put in the following code:

{% for post in object_list %}
    <div class="myDiv">
    <a href="{% url 'article' post.pk %}">{{ post.title }}</a> <br>- {{ post.author }} , {{ post.date.date }}<br>
    </div>
{% endfor %}

But here's what it did:

It makes one big div and placing all the posts/questions in them. How do I separate them?

Here's my css:

         .myDiv {
          background-color: #012B39;
          text-align: left;
          margin: left;
          width: 25%;
          }

Little help will be appreciated! THANKS

P.S I will change the font colors to make them visible with the div.

question from:https://stackoverflow.com/questions/65923284/how-to-put-each-loop-value-into-separate-divs-in-django

Answer 1

It is not that all the elements are rendered in one div. Your div's simply don't have any bottom / top margin and with the background color, It's looking like one div tag. You should check in the inspect element in your browser to make sure. A simple fix would be to add some bottom / top margin in your css:

.myDiv {
    background-color: #012B39;
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 25%;
}

Adjust the margin as per your convenience.