Horizontally centring a DIV in IE7.

[KeredDrahcir]

I can't seem to get a DIV tag to center. it works fine in IE8, Firefox, Safari and Google Chrome and is more or less there in Opera. In IE7 (and IE6) I can't seem to get it to work.

What I need is a box that stretches the whole length of the window whatever the screen resolution or zoom. But then I need a copyright notice inside it that lines up with the left of the main content that it centred and 980px wide.

The HTML follows:

    <div id="footer">
      <div id="footer_content">
        <div id="copyright">
          &nbsp; &nbsp; Copyright © Copyright notice        </div>
        <div id="power">
          Powered by <a href="URL" target="_blank">My Company</a> &nbsp; &nbsp;
        </div>
      </div>
    </div>

I'm using two CSS files to keep my templates seperate from my styles. The CSS is:

#copyright      { position: absolute; top: 80px;  left: 0px;   width: 790px; height: 20px;  }
#power          { position: absolute; top: 80px;  left: 790px; width: 190px; height: 20px;   }
#footer         { position: relative; top: 0px;   margin-left: auto; margin-right: auto; width: 100%;  height: 100px;  }
#footer_content { position: relative; top: 0px; left: 50%;   margin-left: -490px; width: 980px;  height: 100px;  }

And

#footer      { background-image:url('/images/footer.jpg');          font-weight: bolder;   padding: 7px 0 0 0; margin: 0 0 0 0;        color:#9596ea; text-align: center;  font-family:Arial; font-size:10pt; vertical-align: middle; }
#footer_content{ text-align: center;}
#copyright   {                                                                             padding: 0 0 0 0;   margin: 0 0 0 0;        color:#ffffff; text-align: left;    font-family:Arial; font-size:9pt ; vertical-align: middle; }
#power       {                                                                             padding: 0 0 0 0;   margin: 0 0 0 0;        color:#ffffff; text-align: right;   font-family:Arial; font-size:9pt;  vertical-align: middle; }
 

Can anyone suggest what I'm doing wrong? I've found several sites that say either use:

margin: 0 auto;

or

text-align: center;

or

width: 980px; left: 50%; padding-left: -480px;

Although one of these worked in IE8, Firefox, Safari, Google Chrome and Opera, none of them seem to work in IE7.

[drhowarddrfine]

I don't know why you need all that:

<style>
#power{float:right}
</style>
    <p id="footer">
        Copyright © Copyright notice
        <span id="power">
          Powered by <a href="URL" target="_blank">My Company</a> 
        </span>
    </p>
 

IE7 does not work like IE8.