[solved]How to center the footer?

[iselinarnesen]

I'm working on the footer on the website gaianation.org.

I want the width of the footer to be 1349px and centered in the middle the same way as the header.

No matter what I do I cant get it to work, It wont appear on the left side, its expanding on the right side, not centering.

Attached is a photo of how I want it.

Iselin

[M@rtijn]

A link to the website in question would help
Yes, I have seen the txt files, but is always easier to help if you can 'see' the problem


With a bit of css this should not be a problem.

Code: Select all

.pageFooter { width:1349px;margin:0 auto; }

[iselinarnesen]

Thanks for your reply.

Did the changes as you said, but it still doesnt center.

Here is the link: gaianation.org

[M@rtijn]

That looks nice!

How did you come with a width of 1349 pixels? The template is using a 960 width. So if you want the footer to be just as wide as the rest of the page, it should be

Code: Select all

.pageFooter { width:960px;margin:0 auto; }

Then the line above the copyright notice is a bit too long on the right side, to fix that, add:

Code: Select all

.copyright { width: 920px; }

Another thing, in your main content 'Velkommen til Terningen Arena' you have scrollbars, but the text is actually not that long that it needs it. You might want to change

Code: Select all

.pageContentSide { overflow: scroll; }

to

Code: Select all

overflow: auto;

That way the scrollbars will only show up if the text is longer then the content 'box'.

Why is there a link to Wordpress in the footer? You know you are using a better product now?

[uniqu3]

Place <div id=pageFooter"> outside <div id="pageWrapper"> as #pageWrapper has a width of 960px so footer is inside but wider then pageWrapper, it's displayed correctly

[M@rtijn]

Hmm, now I think about it...

You want the footer to be 1349 px wide, your picture shows a box that is indeed wider then the pagewrapper (the rest of the content).

I guess you have a monitor which is 1440 pixels wide and you want to footer to spread over the entire width.
I would advice not to use a static width, but to make it 100%, that way it will also look good on monitors with lower resolutions.

[uniqu3]

@M@rtijn It was 100% width in original template

[M@rtijn]

That explains..

[iselinarnesen]

Problem solved again, thanks you guys! It all about me messing up the template