I had been struggling with a small problem, and thought some of you might be interested, sorry if it's been posted before...
A fixed width div, centered using the usual cross-browser workarounds:
html, body { ... text-align: center; }
#wrapper { ... margin-left: auto; margin-right: auto; }
Now, when the browser window width is reduced, the margins on each side are reduced until there's no margin left. Then behaviors start to vary between browsers. Personally, I prefer the left of the wrapper to stick to the left of the screen, and horizontal scroll bars to appear, especially if there's a menu on the left.
However, on some browsers, such as Mozilla & Firefox on the Mac at least, the left side of the wrapper disappears off screen, and the horizontal scroll bars only allow you to scroll to the right. This makes some content inaccessable.
One solution: put a border on the wrapper. It must have a thickness greater than 0 though, and the style cannot be none. This makes it of limited use if you don't have a flat colored background and don't want the border to show. For all other situations, it works fine.
A fixed width div, centered using the usual cross-browser workarounds:
html, body { ... text-align: center; }
#wrapper { ... margin-left: auto; margin-right: auto; }
Now, when the browser window width is reduced, the margins on each side are reduced until there's no margin left. Then behaviors start to vary between browsers. Personally, I prefer the left of the wrapper to stick to the left of the screen, and horizontal scroll bars to appear, especially if there's a menu on the left.
However, on some browsers, such as Mozilla & Firefox on the Mac at least, the left side of the wrapper disappears off screen, and the horizontal scroll bars only allow you to scroll to the right. This makes some content inaccessable.
One solution: put a border on the wrapper. It must have a thickness greater than 0 though, and the style cannot be none. This makes it of limited use if you don't have a flat colored background and don't want the border to show. For all other situations, it works fine.
