Fixed header but centered when the browser window grows

HTML & CSS
1

Hi,

I have a header that needs to be fixed to the top of the page but when the user resizes the window it needs to stay centered. So the nav and the background of the header need to stay centered in the browser window…the background image is tiled so as the browser grows you start to see the tiled sections on the left and right.

Hope this makes sense…apparently it’s doable but I’m not familiar with how to do it. A developer i’ve been working with who isn’t available now says you can do it by calculating the width, halving it and then position it left that much and then pull it back in with a negative margin…but I’m lost…any idea?

http://boudaki.com/testing/index5.html

2

HI,

Does anyone have any idea about this? could really do with some help.

By the way when I say the browser grows I mean it grows in width. Also the red bits in the example are a rough illustration of where the nav would be.

3

Hi,

When you say fixed do you mean position:fixed ?

If so you can center a fixed header if you first position the header in the normal flow using auto margins on a parent and then once in position you make the header position:fixed but don’t use left or right co-ordinates and it will assume an auto position.

Much the same as the footer here.

However with fixed elements you must ensure that content never resides outside the viewport because if it does it will be unreachable.