CSS footer to bottom of page – nothing works!

[heliosphan]

Hello,

I’ve tried to get my footer to stay at the bottom of the page, but nothing I have tried works. I’ve spent hours researching the answer and tweaking the code to no avail.

Help.

My CSS:

Code:

@charset “UTF-8”;
/* CSS Document */

html, body{height:100%;}
body>#container{height:auto;}

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff url(/images/bgrnd.gif) 50% 0;
margin: 0;
padding: 0;
text-align: center;
font-family:verdana,sans-serif;
font-size:85%;
color:#000;
}

#container {
position:relative;
width: 940px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
min-height:100%;
height:100%;
overflow: hidden;
}

#header {
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background: #fff;
height:120px;
border-bottom-style: inset;
background: url(“images/header.png”) no-repeat;
background-position: 40px 5px;
}

.alignRight {
float:right; margin-left: 1em;
}

#mainContent {
margin: 0 1.5em 0 13em;
padding-bottom: 50px;
height:auto;
}

#top-nav {
float:right;
}

#top-nav img{
position:absolute;
padding-top:95px;
margin:0;
top:0;
left:715px;
}

.clearing {
height:0;
clear:both;
}

h1, h2, h3, h4, h5 {
font-family:trebuchet ms,arial,tahoma,verdana,sans-serif;
font-weight:normal;
letter-spacing:0.005em;
color:#696969;
}

h1{
font-size:2.7em;
font-weight:normal;
letter-spacing:-.015em;
border-bottom:1px solid #CC6600;
background:#fff;
}

h2 {

font-weight:normal;
letter-spacing:-.015em;
border-bottom:1px solid #CC6600;
background:#fff;
}

h1, h2, h3, h4, p {
padding-left:3px;

}

a, a:link {
color:#4F5A9F;
text-decoration:none;
}

a:visited {

color:#909;

}

a:hover, a:active {
color:#990000;
text-decoration:underline;
}

ul.cred {
display: block;
list-style: none;
}

.cred li {
padding-bottom:5px;
}

#footer {
margin: -1.6em auto 0;

position: relative;
height:30px;
background:#DDDDDD;
border-top: inset #696969;
}
#footer p {
height: 30px;
font-size:.8em;
text-align: center
}

.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}

[if IE]>

My HTML:

Code:

• Home
• About Patrick
• Food for Thought
• Testimonials
• FAQ
• Sign up now

a bunch of text….

 

© 2008 | Terms Of Use | Privacy Statement

[heliosphan]

Here is the link. On the page that doesn’t have a lot of content – the footer is in the middle of the page:

http://patrickprindle.com/testimonials.html

[heliosphan]

Problem solved. Thanks.

[Author]

Posts