How to make Smarty composite template correctly?

Question

Smarty

Hello.
Help solve the issue.
There are 3 patterns. Let's call them header.tpl, index.tpl and footer.tpl.
Hader.tpl - contains the header.
Index.tpl - contains the main content.
Footer.tpl - contains the footer of the page.
All 3 templates should be displayed on the index.php page.
However, when writing in php file

$smarty->display('header.tpl');
$smarty->display('index.tpl');
$smarty->display('footer.tpl');

Either in the index.tpl template

{include file="header.tpl"}

        <div class="container-fluid">
            <ul>
                {foreach from=$data item=info} 
                    {$info.login}
                {/foreach} 
            </ul>
        </div>

{include file="footer.tpl"}

The header.tpl content overlaps the index.tpl content.
How to solve this issue?

Answer 1

Option 1 is bullshit.
Option 2 is fine. though it is better to look towards template inheritance.
if one template from the include overlaps the second, then something is wrong with the layout.