MrBlubbintosh MrBlubbintosh - 1 month ago 6
CSS Question

Can't get the footer to stay down (beginner HTML/CSS)

I am a beginner in HTML and CSS, trying my hardest with a task of creating a webpage, as an assignment a uni course I'm taking. This is my second take on the site due to the first being so confusing I couldn't edit appropriately. Now I'm better at structuring but the problem is that my footer refuses to stay down. The site is in an early stage but it messes it all up and I need to get the layout to work to be able to proceed. I'm very thankful for all help you can provide. If you don't understand links or specific namings of tags; might be because it's in Swedish so don't worry. It's not jibberish. Coding is pretty crude but I'm new at this.

So, my footer refuses to stay down. I believe it's due to the settings of my side-width which I wrote when I tried to get rid of the horizontal scroolbar that appeared. (Solved with

overflow-x: hidden;
).
So here is my footer:

<div id= "footer"><a />
Senast uppdaterad:
<script>
document.write(document.lastModified) ;
</script><a />
<script type="text/javascript">
var dateObj = new Date();
document.write(dateObj.toLocaleString());
</script>
<a href="index.html"><img src= "house-308936_960_720.png" alt= Hem height= "25" width= "25"></a> <a href="Bildgalleri.html"><img src= "Camera-512.png" alt= Fotogalleri height= "25" width= "25"></a> <a href="mailto:ridgeback@batuulis.se"><img src= "email.png" alt= ridgeback@batuulis.se height= 40 width= 40></a> <a href="https://www.google.se/maps/place/Lilla+Fiskaregatan+2,+222+22+Lund/@55.7032552,13.1898975,17z/data=!3m1!4b1!4m5!3m4!1s0x465397c4d42a5ba1:0xa5fe9f8023f0c562!8m2!3d55.7032522!4d13.1920862"><img src= "map.jpg" alt= Webbkarta height= "25" width= "25"></a>
<br />
</div>


and this is all of my CSS:

html {
background-color: #ffffff;
width: 100%;
height: 100%;
}
body{
background-color: #FFFFFF;
width: 100%;
height: 100%;
overflow-x: hidden;
}
div#header{
background-color: #FFFFFF;
height: 100px;
padding: 10px;
width: 700px;
background-position: bottom;
}
div#container{
min-width: 900px;
background-color: #FFFFFF;
font-family: Calibri, sans-serif;
}
/*meny*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e6e6e6;
}

li {
float: left;
}

li a {
display: block;
color: black;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #999999;
}

.active {
background-color: #999999;
}
/*aside, alla taggar*/
div#asidecontainer{
position:relative;
top:0;
right:0;
float: right;

}
/*aside, alla taggar var för sig*/
div.imagesright {
float: right;
margin: 5px;
padding: 5px;
padding-bottom: 20px;
clear: right;
}
div.imagesright {
float: right;
margin: 5px;
padding: 5px;
padding-bottom: 20px;
clear: right;
}
div.imagesright {
float: right;
margin: 5px;
padding: 5px;
padding-bottom: 20px;
clear: right;
}
.caption {
display: block;
}
/*samlat innehåll*/
div#content {
width: 800px;
height: 100px;
margin: 20px;
padding: 20px;
float: left;

}
/*hundvälkommen sida1 */
div.hundvälkommen{

}
/*enbart texten i mitten*/
div#text {
text-align: left;
margin: 10px;
padding: 10px;
}
/*footer*/
div#footer{
position: bottom;

}


Also, in the footer, I need one thingy telling me when the site was last updated and one thingy telling me what time it is. Right now, the thingy telling me what time it is seems to be doing the same thing as the update-version of the clock. I have no idea what code I should use and I've tried multiple versions I've found online.

Grateful for every piece of input I get! Thanks in advance:).

Answer

The default layout in a html document is top left to bottom right. So if you only have footer in your page and nothing but the footer then it will be at the top of the page.

If you would like to fix it to the bottom of the page and it stays there no matter what then you can do this with the following

position: fixed;
bottom: 0px;

The first line will make it so it is fixed on the screen and when you scroll up or down it will stay at the same place. Then the second line will make it that it has 0px distance from the bottom of the page.

Also for editing your webpages css I would recommend using google chrome and press F12. I included a image just to show you how useful it can be.

enter image description here

Comments