The Case of the Disappearing Column

When we last left our layout, it had overcome the daunting Firefox wrapping problem (by applying a more generous minimum width).

However, the left column was still disappearing when the browser was resized vertically in IE. Without a solution, the search for the Holy Grail was an unfinished crusade.

I'm happy to announce that the problem has been solved.

The Solution

Replace these rules:

#left {
  width: 200px;             /* LC width */
  right: 200px;             /* LC width */
  margin-left: -100%;
}

* html #left {
  left: 150px;              /* RC width */
}

with these:

#left {
  width: 200px;             /* LC width */
  margin-left: -100%;
  left: 150px;              /* RC width for IE6 */
}

#container > #left {
  left: -200px;             /* -LC width for others */
}

In the case of the padded grail, use these:

#left {
  width: 180px;             /* LC width */
  padding: 0 10px;          /* LC padding */
  margin-left: -100%;
  left: 150px;              /* RC fullwidth for IE6 */
}

#container > #left {
  left: -240px;             /* -(LC fullwidth + CC padding) */
}

You can see these solutions in action for the basic layout, padded version, full-height column version, and container-free version.

The Explanation

So what was the problem? Only the wizards of Redmond know for sure, but here's my best guess. In the original layout, IE is seeing both left and right offset rules. This should have made me suspicious, but since it seemed to work, I didn't think twice.

However, resizing the browser window vertically caused IE to recalculate the offset in a way that forced the left column off the edge of the screen. Resizing horizontally prompted a different calculation, popping it back into place. Just another one of the charms of our favorite browser.

With the new version, IE sees only the value that it should. All other browsers have the initial incorrect value overriden by the correct value. No conflicting offsets, no funny recalculations, no disappearing column.

Anything Else?

The great thing about publishing to a large audience is that bugs are tracked down (and hopefully solved!) very quickly. In this case, one day.

If you do run across any additional funny behavior, please send a note my way.

PS: I'm also aware that the left column behaves a bit odd for widths less than around 400 pixels. If you're browsing with a screen width of 400 pixels, though, you've got problems far more serious than a broken Holy Grail.