My footer is getting stuck in the middle of the web and overlaps with all the content, but only from a certain point.
I know that this is probably happening because I'm not using the "position" properly, so if anybody can help me fixing it, it would be awesome!
Thanks!
Web:
http://codepen.io/anon/pen/QGBKmm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Puzz Hub</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Podkova" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<a href="#">
<img src="./images/logo.jpg" alt="logo"/>
</a>
</div>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li><a href="fixtures.html">NEWS</a></li>
<li><a href="aboutus.html">REVIEWS</a></li>
<li><a href="fixtures.html">GAMES</a></li>
<li><a href="aboutus.html">CONTACT</a></li>
</ul>
</nav>
</header>
<main>
<div id="mainer">
<p class="text_title">Meet Our Team </p>
</div>
<div id="about_container">
<div class="banner">
<div class="subtitle">Mike Wasowsky</div>
<img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
</div>
<div class="banner">
<div class="subtitle">Mike Wasowsky</div>
<img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
</div>
<div class="banner">
<div class="subtitle">Mike Wasowsky</div>
<img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
</div>
<div class="banner">
<div class="subtitle">Mike Wasowsky</div>
<img src="https://avada.theme-fusion.com/wp-content/uploads/2012/08/team1.jpg" class="bannerimg" />
</div>
<div class="soc_banner">
<ul class="list-unstyled list-inline">
<li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
</ul>
</div>
<div class="soc_banner">
<ul class="list-unstyled list-inline">
<li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
</ul>
</div>
<div class="soc_banner">
<ul class="list-unstyled list-inline">
<li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
</ul>
</div>
<div class="soc_banner">
<ul class="list-unstyled list-inline">
<li><a href=""><img src="./images/icons/fb.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/twit.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/insta.png" class="social"/></a></li>
<li><a href=""><img src="./images/icons/reddit.png" class="social"/></a></li>
</ul>
</div>
</div>
</main>
<footer>
<p>© P3rzival, 2016</p>
</footer>
</body>
</html>
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~general tags~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
html {
font-size: 16px;
}
body {
font-family: Calibri, sans-serif;
line-height: 1.5em;
background-color: #ec7063;
color: gray;
}
h1, h2 {
color: purple;
}
h1 {
font-size: 1.25em;
}
p {
margin-bottom: 0.5em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~wrapper~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#wrapper {
background-color: white;
padding: : 9% 15% 0 15%;
text-align: justify;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~header~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header {
/* background-color: #2471a3; */
}
header h1 {
font-family: Papyrus, serif;
font-size: 5em; /* for font-size, em is relative to parent */
line-height: 1.2em; /* for other properties, em is relative to current */
/* element's font size */
padding: 10px 0 10px 0;
color: purple;
}
#logo {}
#logo img{
position: fixed;
margin: -7%;
padding: 0 0 0 23%;
width: 7%;
height: auto !importan;
z-index: 10;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~navigation~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {
width: 100%;
margin: -7% 0 0 0;
padding: 0% 0% 0% 28%;
font-size: 1.125em;
line-height: 1.33em;
font-family: 'Podkova', serif;
background-color: #2e4053;
position: fixed;
z-index: 1;
}
nav ul {
width: 80%;
list-style: none;
}
nav ul li {
padding: 15px 2% 15px 2%;
display: inline-block;;
/* background-color: #2471a3; */
background-color: #2e4053;
}
nav ul li:hover {
/* background-color: #5499c7; */
background-color: #5d6d7e;
}
nav ul li:visited {
/* background-color: #5499c7; */
background-color: #5d6d7e;
}
nav a {
text-decoration: none;
outline: none;
font-weight: bold;
}
nav a:link { color: white; }
nav a:visited { color: white; }
nav a:hover { color: white;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~main content~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main {}
#wrapper {
margin: 8% 15% 0 15%;
text-align: justify;
width: 70%;
height: auto !importan;
}
#mainer {
background-color: white;
margin: 7% 15% 0 15%;
padding: 2% 2% 2% 2%;
text-align: justify;
border-radius: 10px;
width: 70%;
height: auto !importan;
}
#title_bar {
background-color: #922b21;
color: white;
margin: 1% 15% 0 15%;
padding: 1% 2% 0.5% 2%;
text-align: justify;
border-radius: 10px;
width: 70%;
height: auto !importan;
}
#title_bar .title {
font-size: 25px;
line-height: 30px;
letter-spacing: -1px;
text-transform: none;
}
#mainer .title {
font-size: 44px;
line-height: 54px;
letter-spacing: -1px;
font-weight: 400;
text-transform: none;
}
#container {
margin: 1% 0 0 15%;
width: 75%;
height: auto !importan;
position: fixed;
}
#container .banner {
float: left;
background-color: white;
width: 19%;
padding: 2% 2% 0.5% 2%;
margin: 0% 2% 0% 0;
text-align: justify;
border-radius: 10px;
height: auto !importan;
}
#container .subtitle {
font-size: 20px;
font-weight: bold;
text-align: center;
float: left;
background-color: white;
width: 100%;
padding: 1% 1% 1% 0%;
margin: 0 0 2% 0;
border-bottom: 2px solid gray;
}
#container .banner img{
width: 75%;
display: block;
margin: 0 auto 0 auto;
}
#about_container {
margin: 1% 0 0 15%;
width: 75%;
clear: both;
}
#about_container .banner {
float: left;
background-color: #2e4053;
width: 19%;
padding: 2% 2% 2% 2%;
margin: 0% 2% 0% 0;
text-align: justify;
border-radius: 10px;
height: auto !importan;
}
#about_container .soc_banner {
float: left;
background-color: #2e4053;
width: 19%;
padding: 0.5% 2% 0.3% 2%;
margin: 1% 2% 0% 0;
text-align: justify;
border-radius: 10px;
height: auto !importan;
}
#about_container .subtitle {
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
float: left;
width: 100%;
padding: 1% 1% 1% 0%;
margin: 0 0 4% 0;
}
#about_container .bannerimg {
width: 75%;
display: block;
margin: 0 auto 0 auto;
border-radius: 10px;
}
.about {}
.about img{
width: 75%;
display: block;
margin: 0 auto 0 auto;
border-radius: 10px;
}
#container .banner img:hover {
-webkit-transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
main figure {
/*overflow: hidden;*/
width: 30%;
float: right;
margin: 0.5em 0 0.5em 4%;
border: 1px solid gray;
}
main figcaption {
text-align: center;
}
main figure img {
max-width: 100%;
/*max-width: auto;*/
height: auto;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
background-color: #5499c7;
color: white;
margin: 0% 15% 1% 15%;
padding: 1% 2% 0.5% 2%;
text-align: justify;
border-radius: 10px;
width: 70%;
height: auto !importan;
}
.italic {
font-style: italic;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~media rules~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 767px) {
#wrapper {
width: auto;
border: none;
}
header h1 {
font-size: 2em;
}
}
/*~~~ Styling ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.separator {
border-color: #e0dede;
height: 6px;
border-bottom-width: 1px;
border-top-width: 1px;
}
/*~~~ About Page ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.text_title {
font-family: PTSansRegular,Arial,Helvetica,sans-serif;
font-size: 3em;
}
/* ~~~end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.list-unstyled {
padding: 0 0 0 9%;
list-style: none;
}
.list-inline li {
display: inline-block;
padding: 1% 2% 0 2%;
}
.list-inline li img {
width: 40px;
}
You need to add clear:both to the footer.
Here's a demo: http://codepen.io/sol_b/pen/YpjGbN
Also, you had a misspelling: height:auto !importan;