Help! Div shifts while centering...

[porpoise]

Hi there,

Much appreciation if someone could help me with this sticky wicket.

If you load this page you'll see that the white centered div shifts to the left very quickly once images load:

http://www.perrygarvin.net/temp/testsite/design/

It does not do this on this page which uses the exact same HTML/CSS:

http://www.perrygarvin.net/temp/testsite/art/

I've found that if I erase the images on the design page, the div matches up nicely with the art page. But why are those images loading screwing up the alignment from art section to design section?

I'm using Safari and Firefox - latest versions.

Thanks!!!

Perry

[callMeAl]

Hi Perry,

I do not know if I understand your problem but I have noticed, that this white space moves left because vertical scroolbar appears once images load.

<div id="container"> is moving left since its left and right margins are set to auto. For me it's OK but at 1024x786 resolutions the left side of <img src="../images/cornergraphic3.png"/> is being cut. If this is the problem you can try two things: narrow <div id="container"> or put cornergraphic3.png outside container-div(inside other, independent container with own auto-margins).

If you just want to block the white space in one place, no matter whether there will be vertical scroolbar or not you may have to use JavaScript: detect the viewport width and set appropriate margins. It may help.

Good luck:)!

[kiwibrit]

To always show the vertical scroll bar in Firefox, and so eliminate your problem (and achieve consistency with IE presentation) include this in your CSS:

html {overflow-y:scroll;}

Welcome to Webdeveloper.

[porpoise]

Thank you so much for your help. You solved my problem and I sincerely appreciate taking the time to write. You are the best!

Perry