SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Background image doesn't span entire page width after window resized

    Having trouble with a page where, if you resize the browser window ("restore down"), the background images that are set to repeat-x for DIVs with width = 100%, the background only repeats as far as the window and not the entire page. That is, as soon as you scroll to the right, you immediately see that the background no longer spans the entire page width. Why is this, and how do I fix it? I'm hoping this will be a true "duh" moment for me. ;-)

    Here's a URL to a dumbed-down page with most (but not all) extraneous content and CSS removed:

    http://michlink.com/layout_test.html

    Thanks for any help.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    This is happening because
    DIVs with width = 100%,
    means 100% of the PARENT element ( in the case of your example this meas the width of the VIEW PORT, If you have set explicit width for any of the child elements of the container DIVs.. they will OVERFLOW if the sum of their widths become bigger than the size of the window.

    For example:
    IF sum of width of child elements =960px
    and the view port >=960px the container DIVs are >=960px and all seems fine.
    HOWEVER
    IF the view port =800px the container DIVs are =800px and your content overflows right by 160px.

    To prevent this, you could ads something like:
    body, html {min-width:960px;}

    ADDITIONAL NOTE:
    You could fix your drop down by adding #nav ul {position:relative;} and #nav li ul {position:absolute;}

    Hope that helps.

  3. #3
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for the excellent and detailed response. I do believe this qualifies as a "duh" moment, as it's not the first time I've neglected to consider the view port. As for the drop-down, that's only broken because I removed some of the relevant CSS, but I appreciate you going above and beyond to address that. Thank you, good sir. :-)


Bookmarks

Posting Permissions

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