Holy grail (web design)

The limitations of CSS and HTML, the desirability of semantically meaningful pages that rank well in search engines, and the deficiencies of various browsers combined historically to create a situation in which there was no way to create this type of layout that would be considered totally correct.

As the underlying technologies did not provide a proper solution, web designers found various ways to work around the limitations.

Common workarounds included changes in page structure, the addition of graphics, scripting, and the creative use of CSS.

A common requirement is that the sidebars have a fixed width, with the center column adjusting in size to fill the window (fluid or liquid layout).

Another common requirement is that, when a page does not contain enough content to fill the screen, the footer should drop to the bottom of the browser window instead of leaving blank space underneath.

There were many obstacles to accomplishing this: Before the widespread implementation of CSS, designers commonly used tables to lay out pages.

The drawbacks of this method include the three non-semantic divisions, and the difficulty of positioning the elements of this complex layout.

This method still uses one non-semantic division, and makes it difficult to apply background images and borders to the sidebars.

The Flexible Box Layout Module is supported in all of the modern browsers, although Internet Explorer's implementation has issues.

Although the Flexible Box module is capable of performing 2-dimensional page layout, its intended purpose is to position elements primarily along a single axis.

[17] In 2001, Rob Chandanai from BlueRobot[18] pioneered the first three-column flanking design using pure CSS for the website wrongwaygoback.com.

Chandanais's breakthrough provided a more elegant solution that eliminated the need for scripting, simplifying layout creation.

This design approach was later nicknamed "The Holy Grail" by Eric Costello of Glish.com,[19] highlighting its significance in web development.

Holy grail Layout with Dropping Footer
CSS Layout with floated columns and cleared footer, without holy grail features