We help IT Professionals succeed at work.

CSS Alignment problem

uncleramsay
uncleramsay asked
on
429 Views
Last Modified: 2012-05-08
Hi,

On my page I have a header that is made up of two images, and a footer that is made up of one.
I need the footer to have absolute positioning so that it will stick to the bottom of the page.

However, if you view the page with a small browser (<1000px width), the header and footer do not line up. The header is acting correctly, but the footer goes off the page due to the negative left margin I have applied to ensure the image is centered.

The site is here: http://www.giggory.com, and I attach two images demonstrating the problem.

Any ideas?
Thanks.
large-browser.JPG
small-browser.jpg
Comment
Watch Question

what happens if you change
#footer
{
...
margin: 0 auto 0 -500px;

to

margin: -500px;
sorry, change it to margin-left:  -500px;
it happens because you set the left value to 50% decreasing by 500 the margin of the footer so it displays the footer on the center of the page
however the header is not and you should do the same to the footer,
try

#footer {
      position: absolute;
      bottom: 0;
      width: 1000px;
      height: 130px;
      background: url(default/img12.jpg) no-repeat;
}

Author

Commented:
Hmm, that is closer...
Now, however, the image just sticks to the left of the page rather than being in the center.
When the browser is small this is fine, but on a larger browser it looks odd!
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
sirajummuneera, unfortunately, making the footer relative is not a solution for me, as I want the footer to stick to the bottom of the page, whereas making it relative floats it just underneath the content.

Roads_Roads, thanks for your comment. Ideally, I'd like to have both the header and footer acting the same, ideally in the way that the header currently acts. The problem is, I can't position the footer in the same way as the header, as the header is relative, and as I have just explained the footer cannot be relative...
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Commented:

 
<link rel="stylesheet" type="text/css" href="styles.css" />
Use CSS instead of PHP?

Author

Commented:
Selvol: the stylesheet is a CSS file, it is just encoded in PHP because I use several server-side variables in my calculation of the styles.

Accomp: that didn't seem to work for me.

All: I've not been able to have any joy with this, and I think I'm going to accept Roads_Roads's point that very few people will be using a browser less than 1000px wide (except on mobile devices, and I have checked and they are styled perfectly).

I appreciate all your help, so I'm going to share the points among you.

Author

Commented:
Just for everyone's information, I eventually solved this problem by enclosing the footer in an absolutely-positioned, 100% width div.
The footer itself was then given relative positioning with automatic left and right margins - hey presto!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.