/    Sign up×
Community /Pin to ProfileBookmark

Help! Div shifts while centering…

Copy linkTweet thisAlerts:
Oct 30.2009

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:

[url]http://www.perrygarvin.net/temp/testsite/design/[/url]

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

[url]http://www.perrygarvin.net/temp/testsite/art/[/url]

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

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@callMeAlOct 31.2009 — 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?!
Copy linkTweet thisAlerts:
@kiwibritOct 31.2009 — 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.
Copy linkTweet thisAlerts:
@porpoiseauthorOct 31.2009 — 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
×

Success!

Help @porpoise spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...