Can't center header on Firefox/IE when width changes

[Maven4Champ]

http://creativeclarityllc.com/Bracket4.aspx

There is my page. I am trying to center the header on the page regardless of page width (i.e. if someone opens the single East bracket, its centered. If you open the full bracket, the page width drastically changes so we need to re-center the header based on those dimensions.

Can anyone advise by looking at my source code what I can do to resolve this in both Firefox and IE?

 

[Vragabond]

If you remove [tt]position: absolute;[/tt] from your .style1 (the header table style), you will get the desired effect. I have no idea why you used absolute positioning in this circumstance.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Maven4Champ]

That's true but it only works on the small brackets that fit on the immediate screen. Click "View Full Bracket" and the page grows wider - but notice the header is still at the original centered position and isn't actually centered on the whole page...

 

[Maven4Champ]

Can anyone help on this? We go live on this tomorrow evening and I am trying to tweak the remaining stuff (i.e. this CSS) to get it ready for our fundraiser event.

Any help is greatly appreciated.

 

[Vragabond]

Actually, on my screen all brackets look good. They all show very nicely on the entire page. But I guess you're wondering about the fact on some screens, with full bracket, you have to scroll right to see the entire content.

In this respect, I would put the header and the div #full in the same element. This way, their container will be the same size and header will center itself according to that container.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]