Common CSS Problem – Header background cut off when page scrolled horizontally

Actually it can be any element, but it’s usually seen with header divs. For example, head over to facebook. Shrink your page down until a horizontal scrollbar appears, then scroll to the right. Notice that the blue background in the header is cut off. I’ve been noticing this on a few websites lately, but just today thought to check SearchTempest – and found that it had the same problem! Now fixed. The problem is that by default (or even by explicit css) these divs fill 100% of the width of their container. (For example, the page body.) This is good, because no matter how big the browser window is stretched, the div will stretch to fill it. Unfortunately, the 100% refers to the window width, so if the window is shrunk to less than the size of the content, it will be cut off when the page is scrolled horizontally. The solution? Fortunately, it’s simple. Just use the min-width property, and to set it equal to the fixed-width size of the content. My content is 960px wide, so by setting min-width=960px on the header div, I ensure that it is always at least that wide, even if the window is narrower. Of course, it still extended to 100% of the window size if that is wider than 960px. (If your content is variable width, just set the min-width of the header equal to the greatest min-width within the content – ie to the width at which the horizontal scrollbar appears.) Have a better solution? I’d love to hear about it in the comments!

7 thoughts on “Common CSS Problem – Header background cut off when page scrolled horizontally”

  2. Melyssa

    OMG you’re a life-saver! Seriously it was so so so simple and nobody knew, ha! Anyway thanks a lot for putting it out there to help others 🙂

  3. Illaura

    I’m working on an update for my site now and this completely saved my life! I’ve been searching for hours with no luck until I found this article!

    Thank you!!!!

    1. Tempest Nathan Post author

      You’re welcome! It’s awesome that a few people have randomly found this through google and found it helpful! I just noticed too that my facebook example no longer applies; looks like they finally fixed their header! Maybe they saw this post.. 🙂

  5. Ryan

    I searched around for awhile before finding this succinct and articulated solution. Thanks!

Comments are closed.