View Full Version : footer

05-17-2010, 01:33 AM
i am having some trouble, i have found tutorials on it but it doesnt seem to be working.

what i am trying to do is set the footer to the bottom of the window and as i add information to the site and it gets closer to the footer the footer move to the bottom of the page. here is what i have so far, let me know if someone can help. thank u in advanced

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">


<title>Costawurks Freelance | Home</title>

<meta name="description" content="freelance graphic design" />
<meta name="keywords" content="freelance, graphicdesign, logo, web,

multimedia" />
<meta name="author" content="Costa" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"


<link rel="stylesheet" type="text/css" href="general.css" />



<div id="header"> </div> <!-- End of header -->

<div id="container">

<div class="clearfooter"> </div>

</div> <!-- End of container -->

<div id="footer">

</div> <!-- End of footer -->


* { padding: 0;
margin: 0; }

html { height: 100%; }

body { background: url(pattern.png);
background-repeat: repeat;
background-color: #7f9896;
width: 100%;
height: 100%; } /* add css3 gradient */

#container { min-height: 100%
margin-bottom: -69px;
height: 100%;
width: 1024px;
position: relative; }

#header { background: url(header.png);
background-repeat: repeat-x;
width: 100%;
height: 100px; }

.clearfooter { height: 69px;
clear: both; }

#footer { background: url(footer.png);
background-repeat: repeat-x;
height: 69px;
width: 100%;
position: relative; }

what the problem im having is first its pushing the footer not to the bottom of the window but abit farther down, and also when i add enough data that it gets near the footer, the footer doesnt move and it juts goes over the footer and continues down.

05-17-2010, 04:48 AM
Hello 1234m,
I have never tried the method you're using. Just curious, are you following someones example?
Try this one instead - http://nopeople.com/CSS/full-height-layout/index.html

05-20-2010, 01:59 AM
thank you for the response and sorry for the late one, i tried that now, and it fixed one problem where the footer was slightly below the actual window making the viewer have to scroll to find it, but when i add content the footer just stays there. any ideas?

thank you in advance

05-20-2010, 02:31 AM
Would need to see the current version of your code to know what's wrong. A link is always best.