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!