I'm trying to get my website ready for a collage interview, and it's almost finished, but I cannot work out why my footer is floating above the bottom of my page if the size of the windows is above a certain size.
I'll include the HTML and CSS used here:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Finn Llewellyn</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<header id="myHeader">
<div class="container">
<h1>Finn Llewellyn</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li><a class="button" href="#">Contact</a></li>
<li><a class="button" href="#">Projects</a></li>
<li><a class="button" href="#">Cool Things</a></li>
<li>Note: These don't do anyting yet lol</li>
</ul>
</div>
</nav>
<section id="showcase">
<div class="container">
<h1>Computers are cool lol</h1>
<h2>That's why this site is awful on mobile</h2>
</div>
</section>
<div class="container">
<section id="main">
<h1>About Me</h1>
<p>
My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and
which spec components will best suit a specific use case. I also like to think I'm alright at diagnosing and solving technical issues. Staying
true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn
a real, spoken language, like Spanish. Hopefully i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science,
Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a
B-Tech in softwar/app development.
</p>
</section>
<aside id="sidebar">
<h1>Cool Things</h1>
<ol>
<li>Star Wars</li>
<li>Half-Life series</li>
<li>DOOM</li>
<li>Radiohead</li>
<li>Blur</li>
<li>R.E.M</li>
<li>YouTube</li>
<li>AMD Ryzen CPUs</li>
<li>Other geeky stuff</li>
</ol>
</aside>
</div>
<div id="mainFooter">
<p>This footer is just here to look nice</p>
</div>
</body>
</html>
CSS:
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
body{
background-color: white;
color: rgb(85, 85, 85);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
}
.clr{
clear: both;
}
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
#navbar .container{
margin: 0;
}
.button{
background-color: rgb(51, 51, 51);
color: white;
}
.button:hover{
background-color: green;
}
#myHeader{
background-color: green;
color: white;
}
#myHeader .container{
width: 90%;
}
#navbar{
background-color: rgb(51, 51, 51);
color: white;
}
#navbar ul{
padding: 0;
list-style: none;
}
#navbar li{
display: inline;
}
#navbar a{
color: white;
text-decoration: none;
font-size: 18px;
padding: 15px;
}
#showcase{
background-image: url("../Images/showcase.jpg");
background-position: center right;
background-size: 100% 100%;
color: white;
min-height: 300px;
margin-bottom: 30px;
text-align: center;
}
#showcase h1{
color: white;
font-size: 50px;
line-height: 1.6em;
padding-top: 30px;
}
#main{
float: left;
width: 70%;
padding:0 30px;
box-sizing: border-box;
}
#sidebar{
float: right;
width: 30%;
background: rgb(51, 51, 51);
color: white;
padding:0 30px;
box-sizing: border-box;
}
#mainFooter{
background: rgb(51, 51, 51);
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
@media(max-width: 600px){
#main{
width: 100%;
float: none;
}
#sidebar{
width: 100%;
float: none;
}
}
I've already tried adding position: absolute;, width: 100%; and bottom: 0; to the footer class, but it would cover content if it reached that far down the page.
I would appreciate absolutely any help.