Preventing Disappearing Columns and Sidebars

Update: for more on troubleshooting Internet Explorer quirks and bugs, see this post.

Over the last few months, many people have downloaded the three-column templates provided here. These templates use a fluid layout, which means that content scales to accommodate the viewer's font size and/or browser window rather than being locked down at a fixed width. The templates were tested in a wide range of browsers before I put them online. Overall, their performance is solid and feedback has been great. A few people, however, have reported strange behavior in older versions of Internet Explorer. In certain situations, the right-hand column or sidebar may mysteriously vanish or jump around unpredictably.

This well known IE problem actually afflicts many three-column designs that use a fluid or liquid layout. It appears when you enlarge screen fonts or reduce browser window dimensions. And, no, Firefox is not immune.

However, IE versions 6 and earlier are responsible for much of this behaviour. It is due to IE's faulty implementation of the CSS box model, which describes the boundaries of HTML/CSS elements. According to the W3C specification, the width and height of a CSS element is based upon the raw dimensions of the element itself, before the addition of margins, padding, and borders. IE, however, uses a different box model, in which padding and borders are included in calculated base width. When fonts are enlarged beyond the width of a container, IE also improperly widens the container. These differences between the two approaches are responsible for many layout inconsistencies among browsers, including the wrapping third column problem seen in liquid layouts.

Fortunately, there are some simple fixes you can try. And, for the really stoic, all kinds of box model hacks that you can use to achieve virtually identical performance from IE and standards-compliant browsers.

Troubleshooting Tips and Fixes

If all you want to do is prevent a third column from wrapping and absolute consistency across browsers isn't huge issue for you, the troubleshooting strategies below may solve the problem:

• Check for images, form input elements, and web site URLs that exceed column widths and may force wrapping
• Reduce the width of form input elements until columns cease wrapping
• Reduce image sizes until layouts behave themself
• Shorten the alt text of web badges — long strings can force wrapping if the badge doesn't display for some reason
• Try reducing the width, margins, borders, or padding of one or more columns
• Reduce the font size slightly.
• Increase the overall width of the container div by a few pixels or percentage points
• Make sure the cumulative width of all columns, plus their margins, borders, and padding does not exceed 100% of the width of their container div
• Remember that borders add width — one pixel can force unwanted wrapping!

Often, a combination of these measures will seem to eliminate the problem. Don't assume, however, because your layout looks fine in Firefox or your version of IE, that no problem exists. Test in as many browsers as you can, especially older versions of IE. Often, the problem appears when window dimensions are reduced, so test at different window sizes. The problem can also occur when screen fonts are enlarged, so test at different font sizes too (click View / Text Size, and select increasingly larger font sizes, or press control while scrolling your mouse wheel). For the ultimate test, view at large font size in an 800 x 600 size window (type javascript:window.resizeTo(800,600) into your browser address field to simulate this width).

Box Model Hacks for Forced Cross-Browser Consistency

If you wish to trick Internet Explorer into acting like a standards-compliant browser and you are comfortable with CSS, consider using IE conditional comments to provide an alternate style for IE or try the box model hacks linked below. There are several versions of the box model hack, all of which involve "tricking" IE into rendering the box to the same dimensions used by compliant browsers. Be warned, however, that most of these are not for the faint of heart:

• Why does the box model need a hack?
• Tantek's original box model hack
• Getting Internet Explorer to play well with CSS

Hope these tips help, and if other strategies have worked for you, please drop a comment below.