How to fix a Sticky Footer that works, but after a browser window is resized, the footer overlaps.
Posted
by UXdesigner
on Stack Overflow
See other posts from Stack Overflow
or by UXdesigner
Published on 2010-04-21T18:53:35Z
Indexed on
2010/04/25
0:33 UTC
Read the original article
Hit count: 565
Good day,
I've been trying to build a perfect footer who sticks at the bottom of the browser window after it's content. And I got help here @ Stack Overflow previously.
But after a while, and doing a few tests, found out that after the browser window is resized, and then I scroll down , the footer overlaps...it is causing me a big headache right now and I'd like to fix this so I can move on.
I'm going to post the display.css right here:
@charset "utf-8";
body, html {
margin: 0;
padding: 0;
text-align: center;
position: relative;
min-height:100%; /* needed for footer positioning*/
height:100%; /* needed for footer positioning*/
}
.spacer {
clear: both;
height: 0;
margin: 0;
padding: 0;
font-size: 0.1em;
}
.spacer_left {
clear: left;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.1em;
}
hr {
height: 1px;
margin: 20px 0 20px 0;
border: 0;
color: #ccc;
background: #ccc;
}
#container {
position:relative; /* needed for footer positioning*/
min-height: 100%;/* needed for footer positioning*/
height: auto !important;/* needed for footer positioning*/
height: 100%;/* needed for footer positioning*/
margin: 0 auto -30px;/* needed for footer positioning*/
width: 1160px;
padding: 0;
border: 1px solid #333;
text-align: left;
}
#header {
margin: 0;
padding: 5px;
height:70px;
}
#login {
font-family: Arial;
font-size: 15px;
color:#FFF;
text-align: right;
width: 440px;
margin: 2px;
}
#login .theInput {
font-family: Arial;
font-size: 14px;
width: 110px;
margin-right: 5px;
}
#login .theSubmit {
font-family: Arial;
font-size: 10px;
background-color: #333333;
color: #FFFFFF;
margin-right: 5px;
}
h1#lineainvisible {
width:1160px;
height:4px;
position:relative;
margin-top:4px;
visibility: inherit;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul#nav {
width:100%;
height:36px;
display:block;
background-color:#000;
background-repeat:repeat-x;
}
#wrapthatbanner {
display:block;
float:left;
width:100%;
height:524px;
margin-bottom:20px;
}
#content {
margin: 0px 20px 30px 20px; /* needed for footer positioning*/
}
.panelsreadmore {
margin-right: 10px;
text-align:right;
}
div#content.columns {
margin-left: 100px;
}
#content abbr, #content acronym {
cursor: help;
border-bottom: 1px dotted;
}
#content ul {
list-style-type: square;
margin-left: 75px;
}
#content ul li, #content ol li {
margin: 0 0 0.4em 0;
padding: 0;
}
#content blockquote {
width: 75%;
margin: 0 auto;
padding: 20px;
}
#contentLeft {
float: left;
width:580px;
}
#contentRight {
float: right;
width:580px;
}
.sitenote {
display:block;
padding:6px;
border:1px solid #bae2f0;
background:#e3f4f9;
line-height:130%;
font-size:13px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0.5em;
margin-left: 0;
}
#footer, .push /* needed for footer positioning*/ {
padding: 5px;
clear: both;
position:absolute;/* needed for footer positioning*/
bottom:0;/* needed for footer positioning*/
height: -30px;/* needed for footer positioning*/
width:1150px;
}
And this is the HTML Template File.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Title of Page</title>
<!-- TemplateEndEditable -->
<!-- TemplateParam name="categoria" type="text" value="home" -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta Tags - Close -->
<!-- CSS Loader - StartsS -->
<link href="../css/main-client.css" rel="stylesheet" type="text/css" media="all" />
<!-- CSS Loader - Ends -->
<!-- Drop Down Menu -->
<link href="../css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="../css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Drop Down Menu - Ends -->
<!-- Font Replacement Starts -->
<script src="../cufon-yui.js" type="text/javascript"></script>
<script src="../AFB_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2');
</script>
<script type="text/javascript">
Cufon.replace('h3');
</script>
<script type="text/javascript">
Cufon.replace('h4');
</script>
<!-- Font Replacement = END -->
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style type="text/css">#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body id="@@(categoria)@@">
<div id="container">
<div id="header">
<table width="100%" border="0">
<tr>
<td width="67%" height="77px;"><a href="index.html"><img src="../images/Titulos/5.png" alt="" width="257" hspace="10" vspace="10" border="0" id="screen_logo" title=""/></a></td>
<td width="33%" valign="top"><form id="login">Log in: <input type="text" class="theInput" name="user" />
<input type="submit" name="Submit" value="Submit" />
</form>
</td>
</tr>
</table>
</div>
<!-- Aqui es donde empieza fisicamente el menu drop down -->
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="../index.html">Home</a></li>
<li><a href="#" class="dir">Service 1</a></li>
<li><a href="#" class="dir">Service 2</a></li>
<li><a href="#" class="dir">Service 3</a></li>
<li><a href="#" class="dir">Service 4</a></li>
<li><a href="#" class="dir">Service 5</a></li>
<li><a href="#" class="dir">Service 6</a></li>
</ul>
<!-- Aqui termina el menu CSS-->
<!-- Reset -->
<div id="wmfg"> </div>
<!-- Reset -->
<!-- TemplateBeginEditable name="banner-grande" --> <!-- TemplateEndEditable -->
<div id="content"><!-- TemplateBeginEditable name="content" -->
<p> </p>
<!-- TemplateEndEditable --></div>
<div id="footer"><a href="../terms.html">Terms and Conditions</a> |<a href="privacy.html"> Privacy Policy</a><br/>
Copyright 2010. .</div>
</div>
</div>
</body>
</html>
Can somebody take a look at this, and tell me what am I doing wrong ? Thanks in advance.
© Stack Overflow or respective owner
