Preparing my website for a college interview, but struggling to figure out why the footer is floating above the bottom of the page when the window size is above a certain point.
Below are the HTML and CSS snippets used:
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;
}
... (more CSS styles)
Already tried applying position: absolute;, width: 100%;, and bottom: 0; to the footer class, but it obstructed content on the page.
Any assistance would be greatly appreciated.