SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast jaku's Avatar
    Join Date
    Dec 2010
    Location
    Trivandrum, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css background not taking full width when the browser size is reduced

    Hi,

    I have some issue with css background. Please check the following scenario:

    Take www.sitepoint.com website. Check the full width background on the footer (the black one with copyright info). Now reduce the browser size so that horizontal scroll appears (any browser, though I checked in firefox). Scroll horizontally. Notice that the footer is cut and not extending to full width. This problem is also there in the header portion of http://designfestival.com/ website. Repeat the above process and note that the black background on header get cut. Is there any solution for this?

    I believe this situation happens when we use full width background on a fixed width, centered layout.

    Note: Since I have the same issue with my websites, and cannot give the url right now, I have used the sitepoint website address. Kindly help.

    Regards
    Jayakumar

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The way to deal with that is to give a min-width to the element with a background on it. If you have a 100% wide div with the background, for example, and an inner, content div of—say—width 960px, then give the outer div a min-width of 960px and the problem will go away.

  3. #3
    SitePoint Enthusiast jaku's Avatar
    Join Date
    Dec 2010
    Location
    Trivandrum, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    Thanks! Its working fine now. But I would like to know whether this is a bug? What is really happening when we do not provide a min-width?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    No, not a bug. It's just that, when you narrow the browser like that, it fills in the background to fill the visible area, and it's not able to redraw that background if you scroll to the right. So you just have to stop the browser from allowing the background area to resize like that.

  5. #5
    SitePoint Enthusiast jaku's Avatar
    Join Date
    Dec 2010
    Location
    Trivandrum, India
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info.


Tags for this Thread

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
  •