I have some troubles keeping my footer at the bottom of my page, I have looked up quite some thing on various websites but I couldn't find any solution for it cause it would just be stuck on the same place and that's the bottom of my screen and not the page.
What I'm trying to achieve here is that if the page has more content on it than your screen is big then the footer would go down to the bottom of the page but if the page has not enough content on it it would just appear on the bottom of the screen.
Here's my HTML:
<body>
<div id="header">
<div class="clear"></div>
<div id="fotowlogo"><a href="Home.html"><img src="Fotos/Logo.png"></a></div>
<ul id="headtext">
<li class="text"><a href="Home.html">HOME</a></li>
<li class="text"><a href="#">NEWS</a></li>
<li class="text"><a href="ProjectInfo.html">PROJECT INFO</a></li>
<li class="text"><a href="#">TOOLKIT</a></li>
<li class="text"><a href="#">PARTNERS</a></li>
<li class="text"><a href="#">GALLERY</a></li>
<li class="text"><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="container">
<div class="line-separator"></div>
<div class="clear"></div>
<div id="erasmus" style="width=50%;"><img src="Fotos/Erasmus.png"></div>
<p class="Erasmous">This project has been funded with support from the European Commission. This publication reflects the views only of the author, and the Commission cannot be held responsible for any use which may be made of the information contained therein.</p>
<div class="clear"></div></div>
<div id="footer"><p class="ptext">Copyright © 2017 DIDO</p></div>
and here's my CSS:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
#container{
background-color:#F1F1F1;
margin: auto;
height: auto;
}
#header{
background-color:#FFFFFF;
height: 115px;
width: 100%;
}
#fotowlogo{
width: 14.5em;
margin: 15px auto;
float: left;
padding: 0px 0px 0px 450px;
}
#footer{
background-color:#FFFFFF;
height: 60px;
margin: 0px;
position: absolute;
overflow: hidden;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0px 10px 5px 8px black;
}
.line-separator{
height:1px;
background:#BBBBBB;
width: 1800px;
margin: 20px 0px 20px 60px;
}
#erasmus{
/* background-image: url(../Fotos/Erasmus.png);*/
width: 565px;
height: 161px;
margin: 10px 0px 10px 425px;
}
.Erasmous{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 14px;
line-height: 24px;
float:right;
position: relative;
width: 564px;
margin: -140px 350px 0px 0px;
}
#headtext{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 15px;
margin: 0px;
padding: 0px;
width: 100%;
}
#headtext li{
list-style-type: none;
text-align: center;
float: left;
margin: 50px 0px 0px 40px;
}
.text a:link{
text-decoration: none;
color: black;
}
.text a:visited{
color: darkgrey;
}
.text a:hover{
color: darkgrey;
}
.ptext{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 10px;
color: black;
margin: 22px 0px 22px 450px;
padding: 22px 0px 0px 0px;
}
Excuse me for the long codes but I didn't know what I would put in here, I'm a student and I'm currently still in-learning.
As I had to edit this since it was a 'duplicate' I have tried everything from the page it was 'duplicated' from but it still won't work the way I want it to like I have explained at the top.
