What is the reason for nesting divs within each other?

Can anyone help me troubleshoot this Django template code? I have noticed that the main-card-faq div is being rendered inside the main-card div even though it's clearly outside. Any thoughts on what might be causing this issue?

{% extends 'base.html' %}
{% block content %}

<div class="main-card">

{% if heading_info %}
  {% for heading in heading_info %}

{% include  'partials/_heading.html' %}

  {% endfor %}
  {% endif %}

{% if welcome_info  %}
{% for welcome in  welcome_info%}

{% include  'partials/_welcome.html' %}

{% endfor %}

{% endif %}

{% comment %} {% if skills_info %}
{% for  skill in  skills_info%}

{% include  'partials/_skills.html' %}

{% endfor %}
{% endif %} {% endcomment %}

  </div>
  
  <div class="main-card-faq">
  {% include  'partials/_faq.html' %}

  </div>

  test



{% endblock %}

Answer №1

Seems like there might be a mismatched closing tag here. It's a bit challenging to identify because of the presence of several {% ... %} statements in between. Have some patience and troubleshoot meticulously.

Try eliminating all those {%...%} directives, and keep only the "main-card" and "main-card-faq" divs to see if the issue disappears. Then gradually reintroduce those directives one by one, re-rendering each time to check for any issues, until you pinpoint which directive is causing the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is saving uploaded files directly in a Django model an effective strategy for database efficiency?

When using the form.save() method to store a file, is the entire file content saved in the database or just the file path? Imagine having hundreds of thousands or even millions of files. Would it be efficient to store all of them in the database consideri ...

Creating a dynamic shift in background color

Is it possible to use jQuery to slowly change the color of diagonal lines in a background styled with CSS, while also adding a fading effect? I have created a fiddle with the necessary CSS to display a static background. You can view it here: http://jsfid ...

Expand the size of the card box with CSS to create a larger and more prominent display

I recently came across a snippet of Javascript and CSS code. Here is the Javascript: $('.item-card').css("width", $('.item-card').width() + "px"); $('.item-card').css("font-size", $('.item-card').width() * .13 + "p ...

Django continues to throw errors despite successful database connection

For some reason, the code works perfectly fine on my local PC, but when I transferred it to CPanel and connected it to the database, I encountered a dbError when loading a page: This code functions flawlessly in localhost (on my PC), but once I uploaded i ...

Why is it not working when I try to apply a style to a select dropdown box?

Is there a way to style a select box without changing its fixed width when using lowercase and uppercase letters in the option tag? How can I achieve this with 'width="auto"'? DEMO: http://jsfiddle.net/uG3gq/ <div class="select_box" style="m ...

Tips for designing a responsive layout with bordered paragraphs of text

I inserted multiple paragraphs of text into a column. To ensure the text is responsive and surrounded by a border, I created simple HTML code within a div tag: <p> text here</p> <p> 2nd para</p> <p> 3rd para</p> <p&g ...

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

Top tips for resolving Swiper Js initial loading issues in a Carousel!

After implementing swiper js from , I encountered an issue. The initial loading displays only a single carousel item before the rest start appearing, creating a glitchy effect. To clarify, when the website is loaded, only the first item is visible in the ...

Executing a nested function as an Onclick event in an HTML document

I am currently working on a project within the Phone Gap framework where I need to transfer values from one HTML page to another. My solution involved using the code snippet below. var searchString = window.location.search.substring(1),i, val, params = s ...

What is causing concatenated string class names to fail in Tailwind CSS?

Whenever I find myself needing to style my React elements, I end up using the style attribute instead of className. None of the examples I've come across seem to apply styles that fit my specific needs. Can you shed some light on why this happens and ...

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...

Pre-loading custom fonts in Next.js for a smoother user experience

I am currently utilizing next.js. My objective is to ensure that the fonts are loaded before any content is displayed on the screen. I attempted to achieve this by including them in the Head component within the _.document file using the rel="prelo ...

Transition animation when switching between divs in React -

Currently, I am utilizing react-transition-group to assist in managing transitions between different elements. My goal is to create a quiz where each question slides over the previous one once a user answers it. However, I've encountered an issue with ...

CSS uses color parameters in the same way

Apologies, I spent a few years immersed in the world of IT. Now, onto my query: I have a lengthy ".css" file with numerous structures like color: #567567; within it. Is there a way to utilize a construction similar to color: $mycolor or is this not po ...

Issue with jQuery: Function not triggered by value selection in dynamically created select boxes

I am in need of some assistance with my code that dynamically generates select drop down menus. I want each menu to trigger a different function when an option is selected using the "onchange" event, but I am struggling to implement this feature. Any hel ...

"Learn how to specifically extract parent <li> elements without including the child <li> elements

When attempting to crawl a website [URL: https://www.khaasfood.com/shop/], my first task is to retrieve the categories with their hierarchy. The .container element contains a list of li tags representing parent categories. Each parent category may also h ...

The footer is not extending all the way to the bottom when using a flex layout

While working on my website, I attempted to create a sticky footer. To achieve this, I used JavaScript to dynamically generate the <footer> element in order to keep it at the bottom of the page at different screen widths. My goal was to append the f ...

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

Below is an example of HTML with default flex properties being used: <div class="container"> <div class="box"> BOX 1</div> <div class="box"> BOX 2</div> <div class="box box2"> BOX 3 .</div> </div> The ...

Position the center button evenly between two images, aligned vertically using percentages

I'm attempting to achieve a specific layout that includes images scaling across Bootstrap breakpoints and a static button position. The challenge is maintaining the layout as depicted in the mockup, regardless of image size. The images are set to im ...

Activating the Speech Recognition feature in a form triggers the submission of a post

Currently, I am integrating webkitspeechRecongition into a form to allow users to enter data using their voice by pressing a button. However, a challenge arises when the call is triggered by a button within the form as it results in a post/submit action th ...