How to have a centered layout with border (background-image), and footer sticked to the bottom?

I've lost alot of time to try to make this work, but with no success. What I want is to have a div footer and to have a border around the whole website has I use a centered layout of 960px.

I've based myself on two tutorials: CSS and round corners: Boxes with curves and How to Use the Sticky Footer Code

What happens is if I define a min-height:100% the footer is ok, but the border does not goes all the way down if a scroll is needed, if I set an height:100% the footer does not stay down but the border is ok.

Can anyone help?

The m开发者_StackOverflow中文版ain html is:

<div id="border">
   <div class="content">...</div>
   <div class="footer">...</div>
</div>

And css is:

#border
{
   background: url("../Content/Images/border.png") repeat-y;
   width:978px;
   margin:auto;
   /*min-height:100%;*/
   height: 100%;
}


.footer
   {
    height: 116px;
    width: 960px;
        margin-left:auto;
        margin-right:auto;
        background-image: url("../Content/Images/footer_background.png");
        background-repeat: repeat-x;
        position: relative;
        margin-top: -116px;
        clear: both;
       }
       .content
       {
          min-height:100%;
          width:960px;
          margin:auto;
          background-color: #EAFFE6;
       }

---

I suggest you to use the #border div as 960px width and then add the background attribute with the border to the entire body:

body
{
   background: url("../Content/Images/border.png") repeat-y;
}