Results 1 to 4 of 4

Thread: Help! Div shifts while centering...

  1. #1
    Join Date
    Oct 2009

    Help! Div shifts while centering...

    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:


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


    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.



  2. #2
    Join Date
    Aug 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!

  3. #3
    Join Date
    Jun 2005
    United Kingdom
    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.

  4. #4
    Join Date
    Oct 2009

    Thank you!

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


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center