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 FixesIf 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!