Holy Grail Layout

The Holy Grail Layout is a classic CSS problem with various solutions presented over time. Many people are searching for the best method and several goot templates are presented.

Most CSS solutions for Holy Grail aim to meet a few goals:

• They should have a fluid center with fixed-width sidebars.
• The center column(main content) should appear first in the HTML source.
• All columns should be the same height, regarless of which column is actually the tallest.
• They should require minimal markup.
• The footer should "stick" to the bottom of the page when content is sparse.

And one of the most classic templates is like this:

Holy Grails Layout

See the Pen Classic Holy Grail by loconomo (@dontry018) on CodePen.

We can see that how float:left and nagative margin-left are used to let sidebars stick aside. Besides combining padding-bottom: 999px, margin-bottom: -999px, it is able to make the same height for all columns.However, it is not adaptive enough because the main content part need to be set a pair of fixed padding values.

Then the Taobao UED create a more adaptive and advanced version of this classic layout.

Wings layout

See the Pen Wings Layout by loconomo (@dontry018) on CodePen.

More info for Holy Grail layouts:

• Holy Grail Layout solved by Flexbox
• A list of solutions