Can someone help wtih positiong elements in IE?

Question

I can get the elements to position properly in firefox, and opera but not IE. I have the header, container and footer separate from one another. I would put the header in the container but I need an image in the header of width 1200px that fills the entire header and an image of repeating background on the body to fill the rest of the header. My problem is getting the footer to stay properly at the bottom by using 100% height for the container. Negative margin on the container works for the footer with a div of same height as the footer to push it back down. However, negative margin on the top of the container of the same height as the header works in all other browsers but IE. Please help!
<div class="header">
  <div class="headercontainer">
    <div class="headersubcontainer">
    </div>
  </div>
</div>
<div class="container">
<--All content -->
  <div class="push">
  </div>
</div>
<div class="footer">
  <div class="footercontainer">
  </div>
</div>
.container {
    padding: 0px;
    width: 980px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: -176px auto -41px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
.header {
    margin: 0px;
    text-align: center;
    background-image: url(/images/universal/Small_BG_No_Dividers.png);
    background-position: left top;
    background-repeat: no-repeat;
    padding: 0px;
.headercontainer {
    background-image:url(/images/header1.png);
    height: 156px;
    width: 1200px;
    background-position: center top;
    background-repeat: no-repeat;
.headersubcontainer {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    background-repeat: no-repeat;
    width: 980px;
    margin: auto;
    height: 156px;
.push {
    padding: 0px;
    height: 41px;
    width: auto;
    clear: both;
.footer {
    margin-top: 20px;
    padding: 0px;
    height: 41px;
    clear: both;
    text-align: center;
    color: #FFF;
    background-image: url(/images/Footer_Pixel.png);
    background-repeat: repeat-x;
    background-position: bottom;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
* html .footer {/*only ie gets this style*/
    \height:41px;/* for ie5 */
    he\ight:41px;/* for ie6 */
.footercontainer {
    width: 980px;
    margin: auto;
    height: 35px;
Kelsey

Answer 1

If you build your HTML content logically from top to bottom, your footer will always be at the bottom of your page.  You should not require any negative margins for such a simple layout.
Try this and see if it comes close to what you want.
Liquid header and footer
http://alt-web.com/TEMPLATES/I-page-with-floats.html
Nancy O.
Alt-Web Design & Publishing
Web : Print : Graphics : Media
http://alt-web.com/
Twitter: http://twitter.com/altweb
Blog: http://alt-web.blogspot.com/