if you note here:
http://opensecretdev.com/createdbyfate/contact.html
the footer does not reach the bottom if your browser window is tall enough.
same with the rest of the pages.
here's the css.

body {
    font:11px futura, helvetica, sans-serif;
    margin:0;
    padding:0;
    color:#464646;
    letter-spacing: 1px;
    line-height:140%;
    background-color:#bfd1bc;
    }
table,tr {
    margin:0;
    font-size:13px;
    border:0;
    border-collapse:collapse;
    border-spacing:0;
    }
td {
    border:1px solid #464646;
    font:11px futura, helvetica, sans-serif;
    padding:4px;
    }
    
th {
    border:1px solid #464646;
    font:13px futura, helvetica, sans-serif;
    color:#000;
    text-align:left;
    padding:4px;
    }
    
h1 {
    font:14px futura, helvetica, sans-serif;
    margin-top:20px;
    }
    
h2 {
    font:10px futura, helvetica, sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-top:20px;
    }
    
p {
    margin-top:10px;
    }
    
ul {
    margin:0;
    padding:0;
    list-style-type:none;
    }
li {
    margin-left:15px;
    margin-bottom:8px;
    font-size:11px;
    }    
    
a {
    font-family: futura, helvetica, sans-serif;
    text-decoration: none;
    color: #666;
    }
    
a:hover {
    border-bottom:1px solid #666;
    padding-bottom:2px;
    }

#wrap {
    height:100%;
    width:100%;
    margin:0 auto;
    padding:0;
    }
    
#top-spacer {
    width:100%;
    height:5px;
    background-color:#c1d1bd;
    }
    
#head {
    background-image: url('images/leaves-pattern.png');
    background-repeat: repeat;
    width:100%;
    height:160px;
    }
    
#ordering {
    vertical-align:top;
    position:relative;
    top:10px;
    left:465px;
    }
    
#head-holder {
    width:900px;
    height:155px;
    margin:0 auto;
    
    }
    
#topnav {
    vertical-align:bottom;
    float:left;
    position:relative;
    bottom:20px;
    left:145px;
    }
    
#bottom-spacer {
    width:100%;
    height:5px;
    background-color:#8bb07e;
    }
    
#left {
    float:left;
    width:160px;
    height:auto;
    margin-top:-15px;
    }
    
#content {
    margin:30px auto 0 auto;
    width:900px;
    height:auto;
    min-height:350px;
    padding:20px 0 20px 0;
    }
    
#toprr {
    width:900px;
    margin:10px auto 0 auto;
    height:18px;
    background-image:url('images/toprr.gif');
    background-repeat:no-repeat;
    }
#content-catalog {
    margin:0 auto;
    width:900px;
    height:auto;
    min-height:350px;
    padding:20px 0 20px 0;
    background-image:url('images/middlerr.gif');
    background-repeat:repeat-y;
    background-size:100%;
    }
    
#bottomrr {
    width:900px;
    margin:0 auto 10px auto;
    height:18px;
    background-image:url('images/bottomrr.gif');
    background-repeat:no-repeat;
    }
    
    
#footer {
    background-color:#8bb07e;
    width:100%;
    clear:both;
    height:35px;
    padding-top:10px;
    }
    
div.img {
    background-color:#fff;
    text-align:center;
    float:left;
    margin-left:40px;
    width:200px;
    height:auto;
    }
    
div.imgFirst {
    background-color:#fff;
    text-align:center;
    float:left;
    margin-left:40px;
    width:200px;
    height:auto;
    }
    
div.imgSecond {
    text-align:center;
    float:left;
    margin-left:40px;
    width:200px;
    height:auto;
    }
div.imgThird {
    text-align:center;
    float:left;
    margin-left:200px;
    width:200px;
    height:auto;
    }
    
#clear {
    clear:both;
    }
/* text */
p.copyright {
    text-align:center;
    font-size:9px;
    margin-top:10px;
    }
    
p.caption {
    font-size:10px;
    margin-bottom:25px;
    }
    
a.topnavOn {
    font-size:9px;
    color:#bfd1bc;
    letter-spacing:1px;
    margin-left:30px;padding-bottom:2px;
    border-bottom:1px solid #bfd1bc;
    }
    
a.topnav {
    font-size:9px;
    color:#bfd1bc;
    letter-spacing:1px;
    margin-left:30px;
    }

a:hover.topnav {
padding-bottom:2px;
    border-bottom:1px solid #bfd1bc;
    }
    
a.ordering {
    font-size:9px;
    color:#bfd1bc;
    letter-spacing:1px;
    }

a:hover.ordering {
    border-bottom:1px solid #bfd1bc;
    }
    
p.testimonial-name {
    font-size:12px;
    margin-top:50px;
    }
    
a.left {
    color:#464646;
    margin:0;
    }
a:hover.left {
    font-size:11px;
    letter-spacing:2px;
    color:#000;
    margin:0;
    border:none;
    }
a.leftOn {
    font-size:11px;
    letter-spacing:2px;
    color:#000;
    margin:0;
    }
a:hover.leftOn {
    font-size:11px;
    letter-spacing:2px;
    color:#000;
    margin:0;
    border:none;
    }

anybody sure why?

Thanks!

Isn't there a sticky about this?

i dunno, is there?

anybody sure why?

Yep, that's how it works, #footer will position itself after #wrap. If #wrap gets longer #footer will move further down.

here is my offering for a Sticky Footer

and there are more in Always vAlign Bottom

Then there's the faux columns method: http://www.alistapart.com/articles/fauxcolumns/

FYI, you've got some other problems in IE6.

thanks.

i tried:

    <script type="text/javascript">
    function bottomAlign()
      {
      document.getElementById('footer').vAlign="bottom";
      }
    </script>
</head>

<body onload="bottomAlign()">

but didn't seem to work.
will try some more things.

Nope, it wouldn't.

vAlign only applies to table rows and cells.

ah, i see.