View Full Version : Footer height problems

Oct 22nd, 2010, 04:35 AM
Hey all, I want a footer on my site that will stay at the bottom of the browser window. I've read a bunch of different methods for doing this and pieced something together that I think seems to work pretty well. For the most part it is working.

However, earlier today I attempted to add more text to a page (previously I had kept things relatively short and simple), and my girlfriend who was accessing it on a laptop with a smaller resolution than me complained that the footer was overlapping the text box.

I've been trying to fix it so that even at small resolutions the footer will not overlap the text box. I thought I could accomplish this by setting a min-height to the container that I put everything in. However, in IE8, it still overlaps. It seems to work fine in Chrome/Firefox.

Would anyone be able to take a look at what I'm doing here and provide some assistance? Also, is there a way to accomplish this without defining an absolute min-height? If there's a way to make it more dynamic, that'd probably be better.

Example page: http://test.clylla.com
Chrome/IE8 Comparison with CSS: http://test.clylla.com/footerproblem.png


body {background-color:#006090; color:White;}

html, body {margin:0; padding:0; height:100%;}

#container {height:100%; min-height:600px; position:relative;}

#header {background-color:Black; color:White; position:relative; top:15px; left:15px; height:80px; width:420px;}
#header img {border:none}

#navbar {text-align:center; background-color:#003060; color:White; position:relative; top:30px; height:25px; width:100%;}
#navbar a, a.visited {color:White; text-decoration:none; text-align:center;}
#navbar a.hover {color:White; font-weight:bold; text-decoration:none; text-align:center;}

#contentarea {padding-bottom:1.5em;}

#content {border:solid thick black; padding:5px 20px 20px 20px; background-color:FFFFFF; color:Black; position:relative; top:55px; left:15px; height:auto; width:70%;}

#footer {clear:both; text-align:center; background-color:#003060; color:White; position:absolute; bottom: 0; z-index:10; height:1.5em; margin-top:-1.5em; width:100%;}
#footer a, a.visited {color:White; text-decoration:none; text-align:center;}
#footer a.hover {color:White; font-weight:bold; text-decoration:none; text-align:center;}


<title>Grand Chase - Clylla Game & Guild Portal</title>
<link href="style.css" rel="stylesheet" type="text/css">

<div id=container>

<div id=header>
<img src="http://www.clylla.com/images/header.jpg">

<div id=navbar>
<a href="index.shtml">Home</a> <b>|</b>
<a href="http://gc.clylla.com/forum">Forums</a> <b>|</b>
<a href="links.shtml">Links</a>

<div id=contentarea>
<div id=content>
<p>Hello, and welcome to the Aura guild page!</p>
<p>Aura is a casual, socially-oriented guild in the MMORPG "Grand Chase." It is still quite new, so our members are still getting to know each other. We welcome players at any level from around the world, and we only ask that you be active and abide by our Guild Rules as well as the Terms of Use set by Ntreev.</p>

<div id=footer>
Part of the Clylla.com Game & Guild Portal - <a href="http://www.clylla.com">Home</a> <b>|</b> <a href="mailto:[email protected]">Contact</a>



Thanks a bunch for taking a look!

Oct 22nd, 2010, 08:14 PM
Instead of absolute positioning you could try something like what is listed here:

I will forewarn that I have not tested this method personally, and that I have come across issues in the past caused by negative margins (which this method requires). It still might work for your purposes, though.