Nested footer

Question

I'm having trouble figuring out what I'm doing wrong. 
I have a nested box format for the site I am working on.  One for the header, nav bar, text section, and one for my footer.  Each of these nest boxes have margins between them to show the background image behind.  I have the header, nav, and text section like I want them...it's the footer I'm having trouble with.
I want the footer to be the same width as my text section...and I want it to sit in a fixed position (following a margin gap) directly under the text section. 
Here is one page.  http://pointheavenwardsiamese.com/TrulyBlessed/available.php  (It is tacked onto the back on my own site right now as her domain is still directed to her own host.)  On this page you will see it sitting right in the middle of the bottom photo.  Where I'd like it to be is kind of like this page http://pointheavenwardsiamese.com/TrulyBlessed/contact.php but with a space under the footer to once again show the background image.
I am doing this all in Dreamweaver CS5.5 but am copy/pasting into her new host site (as I can't upload the pages yet from my Dreamweaver to the host site).
I'm still learning and don't know what I'm missing from my css.
.footer{
    bottom: 0;
    width: 812px;
    height: 45px;
    left: 627px;
    margin-top: 20px;
    position: absolute;   
    right: 0;
    font-size: 22px;
    color: #000000;
    font-family: "NotnorvalHmkBold", "Comic Sans", Cursive;
    text-align: center;
Thank you.
Melody

Answer 1

.footer { 
    bottom: 0;
    color: #000000;
    font-family: "NotnorvalHmkBold","Comic Sans",Cursive;
    font-size: 22px;
    height: 45px;
    left: 627px;
    margin-top: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 700px;