Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

DIV does not centre on page

Posted on 2012-03-29
12
Medium Priority
?
337 Views
Last Modified: 2012-04-02
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.
0
Comment
Question by:captain
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37782382
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&
0
 
LVL 31

Author Comment

by:captain
ID: 37782694
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?
0
 
LVL 31

Author Comment

by:captain
ID: 37782726
It is almost as if the DIV #wrapper is ignored, I also should not need margin:auto for every container in the wrapper either...
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 37782891
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37782910
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37782928
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&
0
 
LVL 31

Author Comment

by:captain
ID: 37783431
Thanks again Cd&, will play with this later.
0
 
LVL 31

Author Comment

by:captain
ID: 37795677
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?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37797443
I don't understand.  What is still not correct? It looks about the way I expect when I look at it in firefox.

Cd&
0
 
LVL 31

Author Comment

by:captain
ID: 37797489
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.
0
 
LVL 31

Author Closing Comment

by:captain
ID: 37797490
Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37797500
All good lizards deserve help when the wander into a tech area. :^)

Cd&
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question