Tag Archive for 'bugs'

03
Oct

A common oversight in CSS fluid layouts

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 Before Min-Width tag

FireFox 2 - Without min-width

FireFox After Min-Width tag

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.
The CSS

#container {
width:100%;
min-width:960px;
height:200px;
background:#444;
}
#content {
float:left;
width:960px;
background:green;
height:65px;
}

The HTML


<div id="container">
<div id="content">
        im inside text</div>
</div>

text below

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.