I am creating a portfolio website from scratch. I am stuck on the footer part. The footer I have created for other pages works as intended but for the Resume page it stays in the middle of the page rather than at the bottom of the page. I have already tried to search for similar problem and try their solutions but sadly it didn't work for me.
Here is my HTML code
<!doctype html>
<html>
<head>
<title> Game Programmer </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"/>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="project.html">Projects</a></li>
<li><a class="active" href="resume.html">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id = "container">
<div id="doc2" class="yui-t7">
<div id="inner">
<div id="hd">
<div class="yui-gc">
<div class="yui-u first">
<h1>a</h1>
<h2>Game Programmer</h2>
</div>
<div class="yui-u">
<div class="contact-info">
<h3><a id="pdf" href="#">Download PDF</a></h3>
<h3><a href="mailto:1@gmail.com">1@gmail.com</a></h3>
</div><!--// .contact-info -->
</div>
</div><!--// .yui-gc -->
</div><!--// hd -->
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<h2>Profile</h2>
</div>
<div class="yui-u">
<p class="enlarge">
Game Programmer with 2+ years of experience with multiple game engine and a shipped AA title for PC and Consoles. Possesses a Masters in Game Programming.
</p>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Time Management</h2>
</div>
<div class="talent">
<h2>Strong Work Ethics</h2>
</div>
<div class="talent">
<h2>Team Player</h2>
</div>
</div>
</div><!--// .yui-gf -->
<div class="yui-gf">
<div class="yui-u first">
<h2>Technical</h2>
</div>
<div class="yui-u">
<ul class="talent">
<li>C</li>
<li class="last">C++</li>
</ul>
<ul class="talent">
<li>C#</li>
<li class="last">Unity</li>
</ul>
<ul class="talent">
<li>Unreal Engine 4</li>
<li class="last">SVN / Perforce</li>
</ul>
</div>
</div><!--// .yui-gf-->
<div class="yui-gf">
<div class="yui-u first">
<h2>Experience</h2>
</div><!--// .yui-u -->
<div class="yui-u">
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>•e</p>
</div>
<div class="job">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
</div>
<div class="job last">
<h2>a</h2>
<h3>b</h3>
<h4>c</h4>
<p>d</p>
<p>e</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->
<div class="yui-gf last">
<div class="yui-u first">
<h2>Education</h2>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
<div class="yui-u">
<h2>a</h2>
<h3>b</h3>
</div>
</div><!--// .yui-gf -->
</div><!--// .yui-b -->
</div><!--// yui-main -->
</div><!--// bd -->
</div><!-- // inner -->
</div><!--// doc -->
<!--Footer-->
<footer class="social-footer">
<div class="social-footer-icons">
<ul class="menu-simple">
<li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
Here is CSS code
body {
background: url(Images/px_by_Gre3g.png);
font: 16px Helvetica, Arial, Sans-Serif; color: #636363;
}
/* //-- yui-grids style overrides -- */
#inner { padding: 10px 80px; margin: 80px auto; background: #f5f5f5; border: solid #666; border-width: 8px 0 2px 0; }
.yui-gf { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid #ccc; }
/* //-- header, body, footer -- */
#hd { margin: 2.5em 0 3em 0; padding-bottom: 1.5em; border-bottom: 1px solid #ccc }
#hd h2 { text-transform: uppercase; letter-spacing: 2px; }
#bd, #ft { margin-bottom: 2em; }
/* //-- footer -- */
#ft { padding: 1em 0 5em 0; font-size: 92%; border-top: 1px solid #ccc; text-align: center; }
#ft p { margin-bottom: 0; text-align: centezr; }
/* //-- core typography and style -- */
#hd h1 { font-size: 48px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px;}
h2 { font-size: 152% }
h3, h4 { font-size: 122%; }
h1, h2, h3, h4 { color: #333; }
p { font-size: 100%; line-height: 18px; padding-right: 3em; }
a { color: #990003 }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
li { line-height: 24px; border-bottom: 1px solid #ccc; }
p.enlarge { font-size: 144%; padding-right: 6.5em; line-height: 24px; }
p.enlarge span { color: #000 }
.contact-info { margin-top: 7px; }
.first h2 { font-style: italic; }
.last { border-bottom: 0 }
/* //-- section styles -- */
a#pdf { display: block; float: left; background: #666; color: white; padding: 6px 50px 6px 12px; margin-bottom: 6px; text-decoration: none; }
a#pdf:hover { background: #222; }
.job { position: relative; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
.job h4 { position: absolute; top: 0.35em; right: 0 }
.job h3 {margin-top : 5px; margin-bottom : 10px;}
.last { border: none; }
.skills-list ul { margin: 0; }
.skills-list li { margin: 3px 0; padding: 3px 0; }
.skills-list li span { font-size: 152%; display: block; margin-bottom: -2px; padding: 0 }
.talent { width: 32%; float: left }
.talent h2 { margin-bottom: 6px; }
#srt-ttab { margin-bottom: 100px; text-align: center; }
#srt-ttab img.last { margin-top: 20px }
/* --// override to force 1/8th width grids -- */
.yui-gf .yui-u{width:80.2%; padding-bottom: 20px;}
.yui-gf div.first{width:12.3%;}
ul#nav{
width: 1300px; list-style: none; overflow: hidden; margin: 80px 18em 0 auto;
}
#nav li {
width: 100px; height: 35px; float: left; padding: 13px 0 0 0;
background: url(Images/nav-bg.png);
font-weight: bold; text-align: center; text-transform: uppercase;
border-radius: 4px;
}
#nav li:nth-child(1) {
margin: 0 10px 0 0;
}
#nav li:nth-child(2) {
margin: 0 10px 0 0;
}
#nav li:nth-child(3) {
margin: 0 10px 0 0;
}
ul#nav li:nth-child(4) {
margin: 0 10px 0 0;
}
ul#nav li a.active {
color:cadetblue;
text-decoration: underline ;
}
ul#nav li a {
color: #616369; text-decoration: none;
}
ul#nav li a:hover {
color: #a12121;
}
#container {
width: 1300px;
margin: 0 250px;
}
.menu-simple {
margin:auto;
list-style:none;
display: inline-block;
}
.menu-simple li {
font-size:20px;
cursor:pointer;
width:100px;
margin:0;
padding:12px 0;
float:left;
display:block;
height:40px;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
padding:10px 0 auto 0;
width: 100%;
}
.social-footer {
bottom:20px;
background: #8a8a8a;
height:50px;
position: absolute;
bottom: 0;
width: inherit;
}
.social-footer .social-footer-icons .fa {
font-size: 30px;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.15s ease-in;
}
I am not a web designer so don't mind messy code. Thanks in advance.
