DIV does not centre on page

I have recreated our website for test purposes but have a DIV issue.

The site consists of header, flash, content and bottom section (in that order). The header section does not centre on page despite CSS margin:auto. All others do, pulling hair out for a few days.

Checked all DIVs, cannot see the obvious error..

Site is here
{have coloured header pink to highlight it

As you can see it pushes to the left.

Any help would be appreciated to save balding cranium.

thx
capt.
LVL 31
captainAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
You have position:fixed on the header.  With no specification of left, it defaults to zero.  Either remove the fixed position, or calculate the left value you need.


Cd&
captainAuthor Commented:
thx, Cd&

Hm, that makes sort of sense but the DIVs contained within do not work either.

I have removed the position statement for the header entirely.

The Logos and phone number using absolute but hang off the left side too.

How can I have a fixed DIV at the top to allow the navigation to always stay on top whilst the content scrolls up?
captainAuthor Commented:
It is almost as if the DIV #wrapper is ignored, I also should not need margin:auto for every container in the wrapper either...
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

COBOLdinosaurCommented:
Oh absolute... missed that.  Absolute position basically tell the browser to use left an top to position the elements and ignore the flow of the document. That effectively removes them from any chance of inheriting position.


Do it this way.  Set an outer wrapper to position:fixed;left:0px;top:0px;

Then put the header inside of the fixed wrapper.  Set the width of the header and give it margin auto.  Inside the header: margin, padding and text-align combinations should give you the look you want.


Cd&

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Also I would give the outer wrapper a high z-index like 30 or 40 so the scrolled content stays under it, and it may be necessary to use a z-index of -1 on the flash.

Cd&
COBOLdinosaurCommented:
Oh and the disclaimer... You are using spry, and spry has a history of overriding styling and screwing up all attempts to get creative.

Cd&
captainAuthor Commented:
Thanks again Cd&, will play with this later.
captainAuthor Commented:
Ok, have played for a while and used a similar technique than you described.

Not the #wrapper is set to fixed but a new container #top which holds the #header.

Now all elements seem to hang correctly and the site centres, bar the bottom.

I am sure this is to do with the relative positioning of the container but cannot quite get there.

Any ideas?
COBOLdinosaurCommented:
I don't understand.  What is still not correct? It looks about the way I expect when I look at it in firefox.

Cd&
captainAuthor Commented:
Hi Cd&

Sorry, I had continued to work on this and the file got updated. I replaced column layout positions with floats and all came to life

Thanks for looking though.
captainAuthor Commented:
Thanks
COBOLdinosaurCommented:
All good lizards deserve help when the wander into a tech area. :^)

Cd&
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.