A couple of weeks ago, while working on an elastic CSS layout using floated divs, I noticed an annoying problem: when using a fixed width left floated div as well as a 100% width “elastic” div, if the browser is resized and the content is scrolled horizontally, the elastic div’s background stops at the edge of the floated div. Since a large number of web users still use monitors with resolution under 1280px, I knew that the problem would cause usability issues.
After a bit of debugging the code and the lengthy CSS file, I realized that the issue was not with the code, but with the browser itself. During my testing, I found that the issue occurs in Firefox 2, IE7 and Safari (windows) but oddly enough, not in IE6.
FireFox 2 - Without min-width
FireFox 2 - With min-width
The first solution that came to mind was the min-width tag, and after not seeing the issue in IE6 (which does not support min-width or min-height CSS tags), I knew that this was the solution. Because this bug is somewhat difficult to find, I was curious how many other sites using similar design techniques had this issue.
im inside text</div>
After browsing through about 10 popular websites ranging from design blogs to CSS galleries, to online retailers, I was surprised to find that roughly 30% had not corrected this bug. Although the chance that any given user experiences the bug are shrinking as monitor sizes are growing, if only 8% of the users have 800×600 resolution and the site gets 10,000 visitors a week who use a browser other than IE6, that is roughly 41,500+/- visitors a year that are not seeing the site correctly because of the absence of one short CSS tag.