CSS background color or image horizontal scroll fix

[caption id="attachment_354" align="alignright" width="150" caption="Broken background on horizontal scroll"][/caption]

With the arrival of the iPad, tablet for PC and other mobile devices I've encountered more and more issues with my css not doing what you might think it would do on a smaller screen. Particularly when the design width of the site exceeds that of the browser window.

CSS backgrounds fill to 100% of the browser window. You might think that this means the whole window but it actually is only the viewable area. Which means that if your site is 980px for example and the window that your site loads into is less than this they are going to get that dreaded horizontal scroll bar. What's worse is your background isn't going to fill that area to the left.


Sigh....

[caption id="attachment_355" align="alignright" width="150" caption="Fixed with the min-width property"][/caption]

But all is not lost. After harnessing the power of the internet and reading about folks with similar issues I finally found a solution that works and is cross browser! Well almost if you don't include IE7 and lower. That's because the fix uses the min-width property which many of us know is NOT supported in IE7 and lower. Thanks goes to sshh who posted his thoughts over at Stackoverflow.

Ze code:

.ui_pageWrap{background: #cecece; min-width: 980px;}

.ui_page{width: 980px; margin: 0px auto;}

The trick here is setting the min-width to the same width that your content area is. This tells the browser how big you want that background to ALWAYS be no matter what. And if it is bigger well then fill that area too.

How nice.