<footer> is in a middle of the page between two <div>s - html

Question

I've created a website and the footer on the main page is alright on the bottom of the page. But the footer on other pages is in the middle of the page. On this page are actually two divs aligned next to each other and it looks like the footer is between them. I've tried everything I found on other questions like this (I mean position: absolute, relative, fixed) and nothing could move the footer on the bottom of the page. I'm very beginner in HTML and CSS, so I'm sorry if there are more problems in my code.
Here is my html code:
<div class="kontaktujte_nas">
<form class="kontaktni_formular" action="kontaktni_formular.php" method="POST">
<label for="jmeno">Celé jméno</label>
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák">
<label for="email">Váš Email</label>
<input type="email" id="mail" name="mail" placeholder="jan.novak#email.cz">
<label for="predmet">Předmět</label>
<input type="text" id="predmet" name="predmet">
<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava"></textarea>
<button type="submit" name="odeslat">ODESLAT</button>
</form>
<div class="kontaktni_informace" style="background-image: url(assets/icons/adresa.png);">
<span class="k_informace">Horní Domaslavice 293, 73951</span>
</div>
<div class="kontaktni_informace" style="background-image: url(assets/icons/mail.png);">
<span class="k_informace">info#bohmen.cz</span>
</div>
</div>
And my css:
body {
background-color: #212121;
}
.kontaktni_informace {
width: 40%;
float: right;
background-color: black;
background-repeat: no-repeat;
display: block;
margin-top: 40px;
}
.k_informace {
font-family: CovesLight;
font-size: 18px;
font-weight: bold;
padding: 8px 0px 8px 45px;
display: block;
color: #888888;
}
.kontaktujte_nas {
width: 50%;
margin: 0px auto;
padding-top: 40px;
display: block;
}
.kontaktni_formular {
font-family: TeXGyreAdventorRegular;
float: left;
width: 40%;
margin-top: 0px;
}
.kontaktni_formular input, textarea {
display: block;
width: 100%;
font-size: 16px;
padding: 7.5px;
border: 4px solid #888888;
}
.kontaktni_formular label {
display: block;
padding: 15px 0px 2.5px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
}
.kontaktni_formular button {
font-family: TeXGyreAdventorRegular;
font-size: 18px;
margin-top: 15px;
padding: 5px 10px;
cursor: pointer;
margin-right: auto;
margin-left: auto;
display: block;
float: right;
}
.page_title {
margin-top: 0px;
text-align: center;
}
.title span {
font-size: 48px;
font-family: TeXGyreAdventorRegular;
color: #ffffff;
letter-spacing: 5px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
footer {
font-family: TeXGyreAdventorRegular;
text-align: center;
background-color: #111111;
padding: 5px;
color: #ffffff;
width: 100%;
}
.copyright {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}

Answer 1

Try adding overflow: auto; to .kontaktujte_nas

Answer 2

You probably want something like this: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
Found by googling "footer at the bottom of the page" ;)

Answer 3

I believe your problem has been resolved.
But a quick review of your website which I think might help you now and forever:
Try following a semantic structure e.g let the header tag do the job of a heading just as you have the footer and let the main tag handle the remaining content e.g aside and so on.
So basically, i see you have some navigation elements but they are not inside a form of header=>nav=>ul, let that navigation elements at the topest of your page go into the header tag and let the lis go into the ul tag and let the ul go into the nav tag eg:
<header>
<nav>
<ul>
<li>
<a href=".../home">
Home
</a>
</li>
</ul>
</nav>
</header>
The reason why following a standard structure is because they abide by a rule that is been considered when building accessibility tools e.g screen-reader for disable people. And if you dont follow this standard, you will drain yourself either not doing it or doing it imperatively.
So in summary a body holds the header,the main and the footer.
Happy coding, cheers 😉🍺