I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the footer, and I believe they may be connected.
First, here is the CSS code obtained from the website:
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
Additionally, this is the HTML layout of the entire page:
<html>
<head>
<title>{$title_text}</title>
<link rel="stylesheet" type="text/css" href="/global/global.css" />
</head>
<body>
<div id="wrap">
{$navbar}<hr><div id="content">{$body}</div>
</div>
<div id="footer">
{$footer}
</div>
</body>
</html>
There are certain variables displayed as {$variable}, which are taken from another source.
Issue 1:
The footer is positioned too high and overlaps with the rest of the content on the page, resulting in visual clutter. Here is a representation of the problem:
To address this problem, I attempted to add 200px of padding to the ID wrap div right before the footer (referenced in the HTML above). While this resolved the issue depicted in the image, it introduced a new challenge - on pages with minimal content, the footer is pushed down by 200px, necessitating scrolling to view it. The resource where I found the CSS mentioned that this should not occur.
Issue 2:
The footer fails to reach the edges of the browser window. This can be observed below:
The ideal scenario would involve the footer aligning perfectly with both the left and right sides of the window; however, there appears to be a small gap. I'm unsure how to tackle this matter, but I don't believe it's a flaw since the display looks consistent across Chrome, Firefox, and potentially Internet Explorer.
Your insights and suggestions are greatly appreciated. Thank you for your assistance!