I found out about a very common bug recently that has been going on unnoticed – this bug has been so evasive so as to go undetected by even the most popular websites.

If you set a width of 100% on a div and that div has a background, then most likely you will have this bug on your website . . . the bug appears when you resize your window to the point when horizontal scrollbars appear and then you scroll to the right. It’s probably not common practice for somebody to do this and that is probably the foremost reason this bug has been mostly ignored by designers.

Here are some of the more popular websites I’ve found (as of today) that have this:

Now that I’ve exposed this bug . . . the fix is fairly simple – all you have to do is add a min-width property . . . so if your CSS looks like this:


div { width:100%; background:#fefefe url(/images/some_image.jpg) repeat-x; }


then simply add:


div { width:100%; min-width:960px; background:#fefefe url(/images/some_image.jpg) repeat-x; }


This entry was posted on Friday, October 15th, 2010 at 10:15 am and is filed under Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.