Webbers Corner

Here's a problem for you to solve.

I've been testing out position: fixed and max-width and min-width on IE7 and Firefox.

I want to use position: fixed only in a vertical direction for a banner across the top of the screen which won't scroll but I also want to use margin: auto to centralise at various window resolutions so it needs to move left and right for max and min div widths and centralise above the max.

A div with position: fixed will react to max-width and min-width, but only at the right end. The left end is fixed relative to the top left window corner.

It doesn't make any difference whether I use an image or a background image in the banner, position: fixed won't release it from the top left corner.

It's a pity it doesn't work like overflow-x and overflow-y which can have different attributes.

i think i have done what you wanted.

check the attachments.

is this right?

Nearly, but the blue banner does not auto centralise like the text below, it just continues out right with larger window resolutions.

In Firefox the blue banner is always full width but in IE7 the left edge moves to the right with the text below, but not in sync (that's not very important but the left edge must move to centralise in Firefox).

Adding max-width and min-width to the banner and inner div and misc div only works in the misc div (the main text).

Also I'm not good with javascript and I was trying to do it with pure css, using the IE7 position: fixed and max/min width.

I'll test out yor suggestion a bit to see if I can get the blue banner to stop at the right end.

what about the attached now?

I haven't had time to lokk at your suggestion yet.

I've nearly got two solutions. View with a screen resolution higher than 800px wide.

1. http://www.wickham43.supanet.com/musings...fixed.html
The first has a fullwidth banner but the banner text is centralised and moves with the max/min widths of the content below. Up to the max the banner and content both move together and it looks fine but after the max the banner carries on forming a T shape. So if I reset the max to about 1280px only resolutions above that will see the banner expanding beyond the content and all the way from just below 800 to over 1280 the banner and content will be the same width.
This is a cleaner solution than item 2 but I will have to do something different for IE6.

2. http://www.wickham43.supanet.com/musings...fixed.html
The second works better in that the banner is truly max/min and centralised and fixed vertically. The trouble is that below the min when a horizontal scrollbar starts the banner does not leave a margin and it hides the vertical scrollbar of the content part if the slider is up near the top.
This one uses a position: absolute hack that was developed for IE6 and I have already used it before. As item 1 doesn't work in IE6 I may have to use this one.
I got it from
http://www.divinentd.com/experiments/emu...fixed.html

Both versions have a banner fixed in a vertical direction and the banner text moves with the max/min width but neither is perfect.

the one i had has a fixed position div with another div inside which centers the content.

i am not sure what sort of thing you want to do but i know that mine works in ff and ie7 but may not be what you are looking for.