Perfect three-column page layout example

Recently in the internal discussion about the "perfect three columns" topic, see a "in Search of the Holy Grail", quite good. Therefore, translation.

In Search of the Holy Grail

I'm sorry I didn't name the article. I'm not trying to exaggerate his importance or belittle other Holy Grails. But that's what it's called, and we all know what it means.

Three columns, one is a fixed-width navigation bar, the other is a Google ad, or a filckr picture display, just like fancy's truffle chocolate, and an important silky sandwich. In this blog popular Golden Age It is quite applicable, coupled with a considerable degree of difficulty in achieving the "Holy Grail," a well-deserved name.

There are a lot of articles to discuss about the "Holy Grail", and there are a lot of good templates to use. However, all schemes are at the expense of the following characteristics: reasonable content order, width adaptive, reasonable label. These three are often the elements of a compromise that is difficult to achieve in a reasonable layout.

In a recent project, I finally found the legendary Holy Grail. I can describe him as much as possible without changing your code and flexibility. He would be:

• An adaptive center and fixed-width sidebar
• Allow intermediate content to appear in code before others
• Allow any one column to be the highest height
• Just need an extra div tag
• Very simple CSS code and very few hack patches

Standing on the shoulders of giants

This technique is inspired by Alex Robinson's one True Layout. He once described several questions about the Holy Grail in his article, but his solution required two packages and required a parent div for each column, otherwise it would be difficult to write the inner structure.
On the other hand, it was written by Eric Meyer's, who took advantage of multiple types of unit-mix positioning. It also uses a fixed sidebar and an adaptive central layer, but unfortunately, he relies on an approximate percentage, not a fixed value, and fills a layer that is adaptive to the width of the screen with a different resolution.