I am currently learning CSS & HTML and have a bit of trouble. My footer doesn't want to stick to the bottom; it floats above the bottom with space under it (like it had a margin on the bottom, even though it doesn't). I tried with most of the tips I found online, but most of them either don't work or make the header behave weird when the windows are resized (sometimes it puts it in the middle etc.)
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pooblaščeni Prodajalci</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="photos/adidas.png">
<link rel="stylesheet" type="text/css" href="css/trgovine.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header class="tm-header">
<div class="tm-container">
<a href="index.html"><img class="tm-logo"src="photos/adidas.png" width="80px" height="" alt="logo"></a>
<nav class="tm-nav">
<ul>
<li class="hover_menu"><a href="index.html">Domov</a></li>
<li class="hover_menu"><a href="about.html">O nas</a></li>
<li class="current_page"><a href="#">Pooblaščeni Prodajalci</a></li>
<li class="hover_menu"><a href="index.html">Storitve</a></li>
<li class="hover_menu"><a href="index.html">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<div class="tm-container">
<div class="tm-content">
<section>
<article>
<h1 style="text-align: center; font-size: 50px;">Naši pooblaščeni prodajalci</h1>
<div>
<span class="trgovine"><a href="https://www.superge.si/" target="_blank"><img src="photos/superge_logo.png" alt="superge_logo" width="509px" height="200px"></a></span>
<span class="trgovine"><a href="https://www.hervis.si/store/" target="_blank"><img src="photos/Hervis_logo.png" alt="hervis_logo" width="509px" height="200px"></a></span>
<span class="trgovine"><a href="http://sl.sportsdirect.com/" target="_blank"><img src="photos/sports-direct-logo.png" alt="sportsdirect_logo" width="500px" height="200px"></a></span>
</div>
<div>
<span class="trgovine"><a href="https://www.intersport.si/shop/" target="_blank"><img src="photos/intersport_logo.png" alt="intersport_logo" width="509px" height="200px"></a></span>
<span class="trgovine"><a href="https://www.prva-liga.si/" target="_blank"><img src="photos/prva-liga-logo.jpg" alt="prvaliga_logo" width="509px" height="200px"></a></span>
<span class="trgovine"><a href="http://www.decathlon.si/" target="_blank"><img src="photos/decathlon_logo.png" alt="decathlon_logo" width="500px" height="200px"></a></span>
</div>
<div>
<span class="trgovine"><a href="https://www.tomassport2.si/" target="_blank"><img src="photos/tomassport-logo.png" alt="tomassport_logo" width="509px" height="200px"></a></span>
</div>
</article>
</section>
</div>
</div>
<div class="tm-footer">
<footer>
© copyright Adidas 2017
</footer>
</div>
</body>
</html>
And here is the CSS:
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url('../photos/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
.tm-container{
max-width: 1600px;
margin: 0 auto;
}
.tm-container{
max-width: 1600px;
margin: 0 auto;
}
.tm-header{
background: #fff;
height: 64px;
}
.tm-logo{
padding-left: 50px;
float: left;
}
.tm-nav {
float: right;
}
.tm-nav ul li{
display: inline-block;
margin-bottom: 0px;
}
.tm-nav ul li a{
padding-bottom: 10px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #303030;
line-height: 64px;
font-size: 15px;
text-align: right;
border: 1px solid transparent;
}
.tm-container ul li a:hover{
color: #000000;
text-shadow: 1px 0 0 currentColor;
border: 1px solid #303030;
}
.current_page a{
pointer-events:none;
font-weight: 900;
}
p {
margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
}
ul, ol{
margin-left: 20px;
margin-bottom: 20px;
}
.tm-content{
margin-top: 30px;
margin-bottom: 20px;
max-width: 100%;
position: relative;
}
.tm-article{
background-color: white;
padding: 30px;
}
section {
background-color: white;
}
.trgovine img{
border: 1px solid blue;
max-width: 33%;
width: 27%;
margin-right: 3%;
margin-left: 3%;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
display: in-line;
}
.tm-footer{
text-align: center;
background-color: white;
padding: 10px;
font-weight: 700;
margin-top: 30px;
clear: both;
}
Here is a picture of how it actually looks: The arrows show the space below
EDIT: It´s not a duplicate, as the duplicate´s solutions don´t solve this problem
