I want to make a page displaying a centered image of unknown dimensions surrounded by a CSS dropshadow (background images). To do this I used this method.
Please see my test page - tested in Firefox and IE6.
It works fine with small images, but once the image width exceeds 478px the page extends past 100% of the browser window - in a maximized window at 1024x768, that is. A horizontal scrollbar appears, and when I scroll to the right it appears that the layout (represented by the grey top bar) is cut off at 100%. The same effect is achieved through resizing the browser window.
Apparently, adding inside the center div takes care of the problem in Firefox but not in IE.
I colored the #center div black to see what's going on. In Firefox it doesn't show, but it does in IE. My guess is that the center div is not behaving as it should due to the various position:relative, margin-left:50%, right:50% etc.
Is there a way to fix the problem while still keeping the image (unknown dimensions) w/ dropshadow centered?
Thank you for your time.
Edit: Forgot to mention that I have tried overflow:hidden, but that hides most of the image.