Currently, I am encountering an issue with my jQuery menu slide where my footer is causing some problems.
Whenever I zoom in, the footer ends up overlapping all of my other content. This results in a situation where if the website is viewed on a smaller resolution, not all of the content is visible.
I have attempted to remove the position absolute property, but then the footer just moves to the top of the screen.
It is crucial for me to have the footer consistently positioned under my content, regardless of the height of the content itself.
Is it feasible to achieve this with the current script that I am using?
Website:
#footer {
/* Footer container (full browser width) */
background-image:url(../images/footer_bg.jpg);
bottom: 0;
position:absolute;
width: 100%;
height:85px;
padding-top:10px;
padding-bottom: 5px;
}
#footer_box {
/* Centered footer container with padding for proper alignment of content */
width: 820px;
height:30px;
margin:0px auto;
position: relative;
padding:0px 10px 0px 10px;
}
#footercontent {
width: 360px;
height: 30px;
float: left;
padding: 0px;
}
#footerimg {
width: 100px;
height: 30px;
margin: 0px;
float: left;
}
#footerimg p {
float: right;
margin: 38px 0px 0px 0px; !important;
}