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:
Expand|Select|Wrap|Line Numbers
- <div id="footer">
- <div id="footer_content">
- <div id="copyright">
- Copyright © Copyright notice </div>
- <div id="power">
- Powered by <a href="URL" target="_blank">My Company</a>
- </div>
- </div>
- </div>
Expand|Select|Wrap|Line Numbers
- #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; }
Expand|Select|Wrap|Line Numbers
- #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; }
Expand|Select|Wrap|Line Numbers
- margin: 0 auto;
Expand|Select|Wrap|Line Numbers
- text-align: center;
Expand|Select|Wrap|Line Numbers
- width: 980px; left: 50%; padding-left: -480px;