I'm having trouble being able to do two things. I can always seem to accomplish one, but not the other. I'd like to have my footer always appear at the bottom of the page AND take up 100% width of the content container.

HTML:

<div id="wrapper">
 <div id="nav_open">
  nav_open
 </div>

 <div id="content">
  <div id="content_header">
   content_header
  </div>

  <div id="content_body">
   content_body
  </div>

  <div id="content_footer">
   Footer
  </div>
 </div>

 <div id="nav_closed">
  nav_closed
 </div>
</div>

CSS

html, body { margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
   border: none;
  }

#wrapper { position: relative; 
   width: 100%;
   min-width: 940px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;
  }

#nav_open { position: absolute;
   top: 0px;
     left: 0px;
   width: 125px;
   height: 100%;

   border: 1px solid #ff0000;
             }

#content { top: 0px;
   margin-left: 126px;
   margin-right: 201px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;   
  }

#nav_closed { position: absolute;
   top: 0px;
   right: 0px;
   width: 200px;
   height: 100%;

   border: 1px solid #ff0000;   
             }

#content_header { border: 1px solid #ff0000;
  }

#content_body { border: 1px solid #ff0000;
  }

#content_footer { height: 15px;

   background: #df781c;
   border: 1px solid #ff0000;   
  }