During the last several months, many people have downloaded the three-column webpage templates from various sources. These 3 column webpage templates are available at an array of websites. Most have been tested in the various browsers and usually perform correctly. However there have been a few exceptions. There has been some reportedly strange behavior when some of these webpage templates are viewed in the earlier versions of Internet Explorer. The right-hand column can mysteriously disappear or moves around erratically.

This IE problem has been reported before and it affects many three-column layouts. It is usually observed when screen fonts are resized or browser window dimensions are reduced. And Firefox is not necessarily immune. IE versions 6 and earlier are the cause of much of this behavior. This happens because of IE’s problematic implementation of the CSS box model. The box model describes the boundaries of HTML/CSS elements. By W3C specification, the width and height of a CSS element is based upon the raw dimensions of the element itself, and this is before the addition of margins, padding, and borders. IE, however, uses a different box model, which includes padding and borders in the calculated base width. When fonts are enlarged beyond the width of the container, early versions of Internet Explorer also improperly widen the container. The differences between these two approaches are responsible for many layout problems among browsers.

Here are some quick fixes for CSS beginners
* Check to make sure that images, form input elements, and web site URLs don’t exceed column widths
* Reduce the width of form input elements until columns cease to wrap
* Reduce image sizes until layouts behave themselves
* Shorten the alt text of web badges â€â€? long strings may force wrapping if the badge isn’t well displayed
* 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
* Try to reducing the width, margins, borders, or padding of one or more columns
* Reduce the font size slightly.
* Remember that borders add width � one pixel can cause unwanted wrapping

Test your alterations in as many browsers as possible, especially the older versions of IE.

Hasta La Vista, Baby
Arthur Browning