The advent of table-free pure CSS layouts has been great for those browsing with non-PC environments (handhelds, etc.) as they allow cleaner more structured mark-up. However, in normal browsers, even the most beautiful flexible-width CSS layouts get wacky when the window gets too narrow.

Take, for example, Doug Bowman’s Stopdesign site and his client’s site, Wired News (I’m not picking on Bowman — in fact, I chose these sites because his design and CSS is so great, it makes for a good example). Both of these sites use CSS for layout, look fantastic, and are flexible width (all good). However, when you shrink your browser window too narrow (200~300px), elements start to wrap, and this generally get jumbled (see a screenshot of several examples include some of our own sites).

This usually isn’t a problem, as no-one with a modern CSS-aware browser is looking at a site in such a narrow window (and these sites look great with the CSS turned off, no matter how small the window). Still, this has always bothered us. It’s these little things that make a layout feel solid or like they could break at any minute. The issue may also arise when sites are view in another application, such as a small pane in an RSS reader.

We discovered a nice little fix for this that only works in some cases and in some browsers, but is harmless elsewhere, so perhaps worth applying. If you add a min-width attribute to the html element, the page will hold open at the specified width, adding a horizontal scroll bar when the windows is made any smaller. This behaviour is pleasantly familiar to those schooled in class table-layouts.

The CSS is simple;

html { min-width: 550px; }

This technique is not effective when absolute positioning is used for the layout. We were surprised to see that an element with an absolute position to the left (position: absolute; left: 10px;, for example) is rendered against the left edge of the window rather the left edge of the page when the page is smaller than the window. It does work nicely when floats are used for the layout. [see comment for update]

The technique also only works in browsers that support the min-width attribute, including gecko-based browsers (Mozilla/Firebird/Camino, etc.) and Safari (and presumably any other KHTML-based browser). Notably absent from the list of browsers supporting the min-width attribute is Internet Explorer (any version, including 6). This is unfortunate, as the attribute is critical to some layout types. Fortunately, IE and the other browsers that do not support the min-width attribute are at least graceful enough to ignore the attribute complete, rather than having a bungled implementation.